Bug 53166

Summary: `display` styles in media queries don’t get re-applied correctly after resizing when applied on table-row.
Product: WebKit Reporter: Mathias Bynens <mathias>
Component: CSSAssignee: alan baradlay <zalan>
Status: RESOLVED FIXED    
Severity: Normal CC: ameen_bill, ap, christopherbuenaventura, dimmerswitch, giorgio.liscio, info, joachim, mathias, paroga, robin, simon.fraser, webkit, zalan
Priority: P2 Keywords: HasReduction
Version: 528+ (Nightly build)   
Hardware: PC   
OS: OS X 10.6   
URL: http://mathiasbynens.be/demo/webkit-media-query-bug
Attachments:
Description Flags
Minimal test case
none
Minimal test case
none
Testcase that shows the issue in both directions (enlarging/shrinking window) none

Mathias Bynens
Reported 2011-01-26 04:46:03 PST
Created attachment 80182 [details] Minimal test case To reproduce the issue, just follow these steps: 1) Open the attachment (or the online version at http://mathiasbynens.be/demo/webkit-media-query-bug) with a window wider than 654 pixels. Note that the list of links is displayed on one line. 2) Resize your window to a width smaller than 655 pixels. The styles change, and every link is now displayed on its own line. So far, so good. 3) Make your window wider than 654 pixels again. The links should be displayed inline again, but they’re not. Other styles, e.g. `background`, still get applied correctly. This seems to be a WebKit-only issue; the latest stable releases of Opera and Firefox get it right.
Attachments
Minimal test case (51 bytes, text/plain)
2011-01-26 04:46 PST, Mathias Bynens 		no flags
Details
Minimal test case (712 bytes, text/html)
2011-01-26 04:46 PST, Mathias Bynens 		no flags
Details
Testcase that shows the issue in both directions (enlarging/shrinking window) (821 bytes, text/html)
2012-02-09 02:45 PST, T.Rosenau 		no flags
Details
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.
Mathias Bynens
Comment 1 2011-01-26 04:46:42 PST
Created attachment 80183 [details] Minimal test case
Patrick R. Gansterer
Comment 2 2011-01-29 10:38:19 PST
Reproducible with current trunk.
T.Rosenau
Comment 3 2012-02-09 02:45:18 PST
Created attachment 126263 [details] Testcase that shows the issue in both directions (enlarging/shrinking window) This testcase shows the issue when - starting with a narrow window, and widening - starting with a wide window, and shrinking I suppose the "display" property is the only one affected. [OT] I ran into this issue trying to make some responsive layout with table-displays (http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/, which allows to mix percentages with pixels), using automatic table-* insertion as described in http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes [/OT]
Giorgio
Comment 4 2013-05-29 05:03:08 PDT
still reproducible with latest trunk the only workaround i've found is a complete redraw http://jsbin.com/ibacuv/1/edit fix that, please
Christopher
Comment 5 2013-10-09 12:15:08 PDT
I have reproduced another instance of the issue which is only occurring in Webkit. This deals with block/inline-block elements and their combinations with changing position properties in media queries: http://jsfiddle.net/2eNqc/8/ Is there any progress on a resolution to this problem?
alan baradlay
Comment 6 2013-10-14 09:22:32 PDT
http://mathiasbynens.be/demo/webkit-media-query-bug (ul li case) works fine on trunk. It got fixed somewhere between r120351 and r120500. http://jsfiddle.net/2eNqc/8/ (inline-block case) also works fine on trunk. It got fixed somewhere between r140001 and r142015. However the last attached test case (table) still fails and the layout does not recover after resizing.
Christopher
Comment 7 2013-10-14 09:48:05 PDT
I still don't see it working properly for my inline-block case on Chrome 30.0.1599.69 m (Webkit v???, r158213) nor Safari 6.0.5 (Webkit v536.30.1, r???). To clarify what I'm seeing: 1. Start >480px: "Item 1" and "Item 2" are on the same line (correct). 2. Shrink it down to <480px: "Item 1" and "Item 2" are on different lines (correct). 3. Bring it back to >480px: "Item 1" and "Item 2" are still on different lines (incorrect). [Step 2 and 3 exhibit the same behavior even when step 1 is omitted.]
alan baradlay
Comment 8 2013-10-14 12:02:04 PDT
(In reply to comment #7) > I still don't see it working properly for my inline-block case on Chrome 30.0.1599.69 m (Webkit v???, r158213) nor Safari 6.0.5 (Webkit v536.30.1, r???). To clarify what I'm seeing: > > 1. Start >480px: "Item 1" and "Item 2" are on the same line (correct). > 2. Shrink it down to <480px: "Item 1" and "Item 2" are on different lines (correct). > 3. Bring it back to >480px: "Item 1" and "Item 2" are still on different lines (incorrect). > > [Step 2 and 3 exhibit the same behavior even when step 1 is omitted.] Could you check it out with the latest nightly? r157406.dmg">http://builds.nightly.webkit.org/files/trunk/mac/WebKit-SVN-r157406.dmg step 3 looks correct to me (Item 1 and 2 are on the same line)
dimmerswitch
Comment 9 2014-01-06 12:49:11 PST
This is still fully reproducible for me using the test case from Attachment ID 126263, on Safari Version 6.1 (7537.71) / OSX 10.7.5
JB
Comment 10 2015-02-15 08:09:28 PST
Over 4 years later and the issue has still not been fixed... http://jsfiddle.net/G2h9U/
Ameen Bill
Comment 11 2016-01-25 06:35:09 PST
Bug not reproducible now in webkit-r194696. please check and close this bug.
Note You need to log in before you can comment on or make changes to this bug.