Bug 101055

Summary: setting UL padding-right in a setTimeout does not update LI elements inside the list
Product: WebKit Reporter: Radu Brehar <radu>
Component: DOMAssignee: Nobody <webkit-unassigned>
Status: UNCONFIRMED ---    
Severity: Normal CC: mitz, radu, tasak
Priority: P2    
Version: 525.x (Safari 3.2)   
Hardware: PC   
OS: Windows 7   
Attachments:
Description Flags
a simple html page that proves the bug
none
An html file proving a workaround to this bug none

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

setTimeout(function(){

    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:

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);
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.