Bug 53166 – `display` styles in media queries don’t get re-applied correctly after resizing when applied on table-row.

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Mathias Bynens]

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.

[Mathias Bynens]

Created attachment 80183 [details]
Minimal test case

[Patrick R. Gansterer]

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]

[Giorgio]

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]

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?

[zalan]

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]

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.]

[zalan]

(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

[JB]

Over 4 years later and the issue has still not been fixed...
http://jsfiddle.net/G2h9U/

[Ameen Bill]

Bug not reproducible now in webkit-r194696. please check and close this bug.