Bug 101055 - setting UL padding-right in a setTimeout does not update LI elements inside the list
Summary: setting UL padding-right in a setTimeout does not update LI elements inside t...
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: 525.x (Safari 3.2)
Hardware: PC Windows 7
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2012-11-02 08:17 PDT by Radu Brehar
Modified: 2012-11-07 22:56 PST (History)
3 users (show)

See Also:

a simple html page that proves the bug (30 bytes, text/plain)
2012-11-05 02:23 PST, Radu Brehar
no flags Details
An html file proving a workaround to this bug (1.33 KB, text/html)
2012-11-07 05:42 PST, Radu Brehar
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Radu Brehar 2012-11-02 08:17:15 PDT
I'm trying to set the padding-right of a UL element, in a function called by setTimeout.
The padding is correctly set, I can see that in the web inspector, but the LI elements inside it are not adjusted in width to reflect the change.

I was able to reproduce it in Chrome and Safari.

I have created 3 scenarios (I have use Chrome Version 22.0.1229.94 m and Safari 5.1.7 to test):

The ul with padding-right in static css - obviously works http://jsbin.com/ufifos/5/edit
The ul with padding-right set in js code not inside setTimeout - works -  see http://jsbin.com/ekazow/1/edit
The ul with padding-right set in js code inside a setTimeout - NOT WORKING properly - http://jsbin.com/uzorux/1/edit

The padding-right is set, but the li elements are not repainted correctly. A browser resize (or a few resizes) fixes it.

Basically the code is


    document.getElementById('container').style.paddingRight = '20px';

}, 2000);

It works properly in all non-Webkit browsers.
Comment 1 Radu Brehar 2012-11-02 08:22:26 PDT
I have asked a question on stackoverflow for thi bug, at http://stackoverflow.com/questions/13197826/how-to-make-ul-padding-right-being-respected-by-list-items-when-dynamically-set
Comment 2 Radu Brehar 2012-11-04 23:10:16 PST
I have tried the same scenario, with <div>s instead of ul and li elements, and the behavior is exactly the same.
Comment 3 Radu Brehar 2012-11-05 02:23:48 PST
Created attachment 172299 [details]
a simple html page that proves the bug
Comment 4 Radu Brehar 2012-11-07 05:42:21 PST
Created attachment 172773 [details]
An html file proving a workaround to this bug

An html file proving a workaround to this bug. I had to force a reflow/repaint/resize on the UL in order for child elements to be rendered correctly.
Comment 5 Radu Brehar 2012-11-07 05:45:35 PST
I have found a workaround to this bug.

In order for child LI elements of the UL container to be correctly displayed, I had to toggle the display of the UL, and also adjust the size of the UL.

Basically the code is now the following:

    console.log('setting padding');
    var container = document.getElementById('container'),
        containerStyle = container.style;
    containerStyle.borderRightWidth = '20px'; //or containerStyle.paddingRight
    //workaround: force reflow&repaint 
    //- changing display to none and setting it again to the previous value   
    //is not enough. We need to change width as well

    var display = containerStyle.display;

    containerStyle.display = 'none';
    containerStyle.width = container.offsetWidth + 'px';
    containerStyle.width = '100%';
    containerStyle.display = display;
   //workaround END
}, 2000);
Comment 6 Takashi Sakamoto 2012-11-07 22:52:25 PST
I think, this would be the same as bug 93876.

Best regards,
Takashi Sakamoto
Comment 7 Radu Brehar 2012-11-07 22:56:31 PST
Yes, it seems to be a bug around the same issue, except in this case we do not have css transitions, but rather padding/border-width are set in a setTimeout.