RESOLVED CONFIGURATION CHANGED92802
Not correctly removing absolutely positioned div from page flow upon window resize 
https://bugs.webkit.org/show_bug.cgi?id=92802
Summary Not correctly removing absolutely positioned div from page flow upon window r...
Chris Lee
Reported 2012-07-31 15:54:07 PDT
Created attachment 155657 [details] just a pre-written version of the test code for opening and tweaking with The simplest way I can explain this is using a minimal example. Given the following snippet: <!doctype html> <style> .inline { display: inline; } @media only screen and (min-width: 501px) { #test { position: absolute; left: 100px; } } </style> <div class="inline">Foo</div> <div id="test">Not here</div> <div class="inline">Bar</div> Load this code up. When you first load the page (assuming your viewport is greater than 500 pixels), you'll get something like: Foo Bar Not here Now shrink the viewport media query goes away. You end up with: Foo Not here Bar Now expand the viewport again. You end up with: Foo Bar Not here Which is not correct anymore. If it helps, the current workaround I have for a production site is a little jquery event for webkit browsers: $(window).resize( function() { $('#foo').hide(); window.setTimeout( function() { $('#foo').show(); }, 0); }); Forcing this little bit of re-rendering is enough to get the Foo and Bar elements to flow correctly, but obviously this is sub-optimal.
Attachments
just a pre-written version of the test code for opening and tweaking with (251 bytes, text/html)
2012-07-31 15:54 PDT, Chris Lee 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Brent Fulgham
Comment 1 2022-07-13 10:37:50 PDT
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.
Note You need to log in before you can comment on or make changes to this bug.