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';
It works properly in all non-Webkit browsers.
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
I have tried the same scenario, with <div>s instead of ul and li elements, and the behavior is exactly the same.
Created attachment 172299 [details]
a simple html page that proves the bug
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.
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:
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;
I think, this would be the same as bug 93876.
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.