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: | CSS | Assignee: | zalan <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
Mathias Bynens
2011-01-26 04:46:03 PST
Created attachment 80183 [details]
Minimal test case
Reproducible with current trunk. 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] still reproducible with latest trunk the only workaround i've found is a complete redraw http://jsbin.com/ibacuv/1/edit fix that, please 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? 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. 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.] (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) 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 Over 4 years later and the issue has still not been fixed... http://jsfiddle.net/G2h9U/ Bug not reproducible now in webkit-r194696. please check and close this bug. |