I recently came across an odd behavior when trying to calculate the width (with margins) of an element using gwtQuery. The goal is to get the width (including padding, borders and margins) of a given element as a child of a certain parent. This parent may define specific CSS rules for some children so I clone it, add my element to this parent, call .outerWidth(true) to get the width and finally remove the clone from the parent.

It works fine on Chrome, Firefox and IE 10, but randomly fails (outputs 0) on IE 8. However I noticed that if I put a "sleep" between the moment I add the element to the DOM and the moment I get the outer width, it always succeeds.

I obviously don't want to keep that sleep. So my question is does anyone has any insights on how to work around this behavior or even a better way of achieving the same goal?

Thank you!

Here's a code snippet

private Integer computeTabWidth(IsWidget tab) {
    GQuery $tab = $("<li></li>").append($(tab).clone());

    $(containerPanel).append($tab);

    // IE 8 debug.
    sleep(100);

    Integer tabWidth = $tab.outerWidth(true);
    $tab.remove();

    return tabWidth;
}

private void sleep(int i) {
    long time = new Date().getTime() + i;

    while (time > new Date().getTime());
}