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: ahmad.saleem792, karlcow, mitz, radu, rniwa, 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

Radu Brehar
Reported 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.
Attachments
a simple html page that proves the bug (30 bytes, text/plain)
2012-11-05 02:23 PST, Radu Brehar
no flags
An html file proving a workaround to this bug (1.33 KB, text/html)
2012-11-07 05:42 PST, Radu Brehar
no flags
Radu Brehar
Comment 1 2012-11-02 08:22:26 PDT
Radu Brehar
Comment 2 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.
Radu Brehar
Comment 3 2012-11-05 02:23:48 PST
Created attachment 172299 [details] a simple html page that proves the bug
Radu Brehar
Comment 4 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.
Radu Brehar
Comment 5 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);
Takashi Sakamoto
Comment 6 2012-11-07 22:52:25 PST
I think, this would be the same as bug 93876. Best regards, Takashi Sakamoto
Radu Brehar
Comment 7 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.
Ahmad Saleem
Comment 8 2023-03-03 16:59:30 PST
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!
Note You need to log in before you can comment on or make changes to this bug.