Summary: | setting UL padding-right in a setTimeout does not update LI elements inside the list | ||||||||
---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Radu Brehar <radu> | ||||||
Component: | DOM | Assignee: | Nobody <webkit-unassigned> | ||||||
Status: | UNCONFIRMED --- | ||||||||
Severity: | Normal | CC: | ahmad.saleem792, karlcow, mitz, radu, rniwa, tasak | ||||||
Priority: | P2 | ||||||||
Version: | 525.x (Safari 3.2) | ||||||||
Hardware: | PC | ||||||||
OS: | Windows 7 | ||||||||
Attachments: |
|
Description
Radu Brehar
2012-11-02 08:17:15 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 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: 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); I think, this would be the same as bug 93876. Best regards, Takashi Sakamoto 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. 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! |