Bug 101055 – setting UL padding-right in a setTimeout does not update LI elements inside the list

• Component: DOM
• Status: UNCONFIRMED

[Radu Brehar]

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

setTimeout(function(){

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

}, 2000);

It works properly in all non-Webkit browsers.

[Radu Brehar]

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

[Radu Brehar]

I have tried the same scenario, with <div>s instead of ul and li elements, and the behavior is exactly the same.

[Radu Brehar]

Created attachment 172299 [details]
a simple html page that proves the bug

[Radu Brehar]

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.

[Radu Brehar]

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:

setTimeout(function(){
    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
			
    console.log('done!');
}, 2000);

[Takashi Sakamoto]

I think, this would be the same as bug 93876.

Best regards,
Takashi Sakamoto

[Radu Brehar]

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.

[Ahmad Saleem]

I took the JSBin from 'a simple html...':

Link - http://jsbin.com/uzorux/1/edit

I am not able to reproduce this bug in Safari 16.3, STP164 and it matches with Chrome Canary 113 and Firefox Nightly 112.

Appreciate if someone else can confirm and mark this bug accordingly. Thanks!