53166 2011-01-26 04:46:03 -0800 `display` styles in media queries don’t get re-applied correctly after resizing when applied on table-row. 2016-02-01 14:43:19 -0800 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) PC OS X 10.6 RESOLVED FIXED http://mathiasbynens.be/demo/webkit-media-query-bug HasReduction P2 Normal --- 1 mathias zalan ameen_bill ap christopherbuenaventura dimmerswitch giorgio.liscio info joachim mathias paroga robin simon.fraser webkit zalan oldest_to_newest 340204 0 80182 mathias 2011-01-26 04:46:03 -0800 Created attachment 80182 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. 340206 1 80183 mathias 2011-01-26 04:46:42 -0800 Created attachment 80183 Minimal test case 342113 2 paroga 2011-01-29 10:38:19 -0800 Reproducible with current trunk. 552992 3 126263 T.Rosenau 2012-02-09 02:45:18 -0800 Created attachment 126263 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] 894902 4 giorgio.liscio 2013-05-29 05:03:08 -0700 still reproducible with latest trunk the only workaround i've found is a complete redraw http://jsbin.com/ibacuv/1/edit fix that, please 938015 5 christopherbuenaventura 2013-10-09 12:15:08 -0700 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? 939466 6 zalan 2013-10-14 09:22:32 -0700 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. 939475 7 christopherbuenaventura 2013-10-14 09:48:05 -0700 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.] 939582 8 zalan 2013-10-14 12:02:04 -0700 (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? 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) 964724 9 dimmerswitch 2014-01-06 12:49:11 -0800 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 1069310 10 info 2015-02-15 08:09:28 -0800 Over 4 years later and the issue has still not been fixed... http://jsfiddle.net/G2h9U/ 1158293 11 ameen_bill 2016-01-25 06:35:09 -0800 Bug not reproducible now in webkit-r194696. please check and close this bug. 80182 2011-01-26 04:46:03 -0800 2011-01-26 04:46:42 -0800 Minimal test case url.txt text/plain 51 mathias aHR0cDovL21hdGhpYXNieW5lbnMuYmUvZGVtby93ZWJraXQtbWVkaWEtcXVlcnktYnVn 80183 2011-01-26 04:46:42 -0800 2013-10-14 09:22:57 -0700 Minimal test case webkit-media-query-bug.html text/html 712 mathias PCFkb2N0eXBlIGh0bWw+Cjx0aXRsZT5XZWJLaXQgYnVnIHdpdGggQG1lZGlhIHF1ZXJpZXM8L3Rp dGxlPgo8c3R5bGU+CnVsIHsgcGFkZGluZzogMDsgfQpsaSB7IGRpc3BsYXk6IGlubGluZTsgfQph IHsgZGlzcGxheTogaW5saW5lLWJsb2NrOyBiYWNrZ3JvdW5kOiBsaW1lOyB9CiNsdC02NTUgeyBk aXNwbGF5OiBub25lOyB9CiNndC02NTQgeyBkaXNwbGF5OiBibG9jazsgfQoKLyogPCA2NTVweCAq LwpAbWVkaWEgYWxsIGFuZCAobWF4LXdpZHRoOiA2NTRweCkgewogYSB7IGRpc3BsYXk6IGJsb2Nr OyBiYWNrZ3JvdW5kOiByZWQ7IH0KICNsdC02NTUgeyBkaXNwbGF5OiBibG9jazsgfQogI2d0LTY1 NCB7IGRpc3BsYXk6IG5vbmU7IH0KfQo8L3N0eWxlPgo8cCBpZD1sdC02NTU+WW91ciB3aW5kb3cg aXMgc21hbGxlciB0aGFuIDY1NSBwaXhlbHMuIEV2ZXJ5IGxpbmsgc2hvdWxkIGRpc3BsYXkgb24g aXRzIG93biBsaW5lLgo8cCBpZD1ndC02NTQ+WW91ciB3aW5kb3cgaXMgd2lkZXIgdGhhbiA2NTQg cGl4ZWxzLiBUaGUgbGlua3Mgc2hvdWxkIGJlIGRpc3BsYXllZCBvbiBvbmUgbGluZS4KPHVsPgog PGxpPjxhIGhyZWY9Iz5Gb288L2E+CiA8bGk+PGEgaHJlZj0jPkZvbzwvYT4KIDxsaT48YSBocmVm PSM+Rm9vPC9hPgogPGxpPjxhIGhyZWY9Iz5Gb288L2E+CiA8bGk+PGEgaHJlZj0jPkZvbzwvYT4K IDxsaT48YSBocmVmPSM+Rm9vPC9hPgo8L3VsPg== 126263 2012-02-09 02:45:18 -0800 2012-02-09 02:45:18 -0800 Testcase that shows the issue in both directions (enlarging/shrinking window) test2.html text/html 821 T.Rosenau PCFkb2N0eXBlIGh0bWw+CjxzdHlsZT4KICAgICNjb250YWluZXIgewogICAgICAgIGRpc3BsYXk6 IHRhYmxlOwogICAgICAgIHRhYmxlLWxheW91dDogZml4ZWQ7CiAgICAgICAgd2lkdGg6IDEwMCU7 CiAgICB9CiAgICAuY2VsbCB7CiAgICAgICAgZGlzcGxheTogdGFibGUtY2VsbDsKICAgICAgICBi b3JkZXI6IDFweCBkb3R0ZWQgYmx1ZTsKICAgICAgICB3aWR0aDogNTAlOwogICAgfQogICAgI2Nl bGwyIHsKICAgICAgICB3aWR0aDogMTBweDsKICAgIH0KICAgIEBtZWRpYSBvbmx5IHNjcmVlbiBh bmQgKG1heC13aWR0aDo4MDBweCkgewogICAgICAgICNjZWxsMiB7CiAgICAgICAgICAgIGRpc3Bs YXk6IHRhYmxlLXJvdzsKICAgICAgICAgICAgaGVpZ2h0OiAxMHB4OwogICAgICAgIH0KICAgIH0K PC9zdHlsZT4KPGJvZHk+CjxkaXYgaWQ9ImNvbnRhaW5lciI+CiAgICA8ZGl2IGNsYXNzPSJjZWxs IiBpZD0iY2VsbDEiPiBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRp cGlzaWNpbmcgZWxpdCwgc2VkIGRvIGVpdXNtb2QgdGVtcG9yIGluY2lkaWR1bnQgdXQgbGFib3Jl IGV0IGRvbG9yZSBtYWduYSBhbGlxdWEuPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJjZWxsIiBpZD0i Y2VsbDIiPjwvZGl2PgogICAgPGRpdiBjbGFzcz0iY2VsbCIgaWQ9ImNlbGwzIj4gTG9yZW0gaXBz dW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQsIHNlZCBkbyBl aXVzbW9kIHRlbXBvciBpbmNpZGlkdW50IHV0IGxhYm9yZSBldCBkb2xvcmUgbWFnbmEgYWxpcXVh LjwvZGl2Pgo8L2Rpdj4KPC9ib2R5Pgo=