[Webkit-unassigned] [Bug 92802] New: Not correctly removing absolutely positioned div from page flow upon window resize

Tue Jul 31 15:54:05 PDT 2012

https://bugs.webkit.org/show_bug.cgi?id=92802

           Summary: Not correctly removing absolutely positioned div from
                    page flow upon window resize
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: All
        OS/Version: All
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: chrislee.public at gmail.com

Created an attachment (id=155657)
 --> (https://bugs.webkit.org/attachment.cgi?id=155657&action=review)
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.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.