130378 rem-resize-jank 2014-03-17 18:20:59 -0700 Resizing around responsive boundaries when using rem unit causes jank/jitter 2017-08-09 11:53:18 -0700 1 1 1 Unclassified WebKit Layout and Rendering 528+ (Nightly build) Mac (Intel) OS X 10.9 NEW http://samhuri.net/f/grid-bug.html P2 Normal --- 1 sami.samhuri webkit-unassigned fluehrm oldest_to_newest 991493 0 226994 sami.samhuri 2014-03-17 18:20:59 -0700 Created attachment 226994 test case When the font-size is defined on the html element and sizes are specified in rems, Safari 7 flickers the sizes back and forth when resizing around each responsive boundary. Video: http://youtu.be/_36K18JheP4 Steps to reproduce 1. Visit http://samhuri.net/f/grid-bug.html in Safari 7 on a Mac. 2. Resize your browser window enough to cross a responsive boundary, 40rem or 64rem in this case. 3. Observe the jank I fear I have not described the problem well, please see the attached test case. It should be clear. Let me know if I can help with anything! -s 991542 1 sami.samhuri 2014-03-17 21:27:38 -0700 I should note that when I define the font sizes on the body element instead of the html element, no such flicker occurs. You can see that in action at http://samhuri.net. Not sure if that's a useful tidbit or not. 1337067 2 fluehrm 2017-08-09 11:53:18 -0700 Any update on this? This bug is still a problem on Safari 10.1.2. Combined with transitions and other things, it can destroy the usability of a website. (Fortunately, Sami's suggestion about moving the font sizes to `body` works. You're a lifesaver, Sami!) 226994 2014-03-17 18:20:59 -0700 2014-03-17 18:20:59 -0700 test case grid-bug.html text/html 589 sami.samhuri PCFkb2N0eXBlIGh0bWw+CjxodG1sPgoKPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0idXRmLTgiPgoK ICA8dGl0bGU+amFuazwvdGl0bGU+CgogIDxzdHlsZT4KCiAgICBodG1sIHsgZm9udC1zaXplOiAx MDAlIH0KCiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDByZW0pIHsKICAgICAgaHRtbCB7IGZvbnQt c2l6ZTogMTEyJSB9CiAgICB9CgogICAgQG1lZGlhIChtaW4td2lkdGg6IDY0cmVtKSB7CiAgICAg IGh0bWwgeyBmb250LXNpemU6IDEyMCUgfQogICAgfQoKICA8L3N0eWxlPgo8L2hlYWQ+Cgo8Ym9k eT4KCiAgPGgxPnJlbS1zaXplZCBlbGVtZW50cyBhbmQgZm9udHMgZmxpY2tlciB3aGVuIHJlc2l6 aW5nIGFyb3VuZCB0aGUgbWFya2VkIHdpZHRoczwvaDE+CgogIDxkaXYgc3R5bGU9IndpZHRoOiA2 NHJlbTsgYmFja2dyb3VuZC1jb2xvcjogI2FkYSI+CiAgICA8cCBhbGlnbj0iY2VudGVyIj42NHJl bTwvcD4KCiAgICA8ZGl2IHN0eWxlPSJ3aWR0aDogNDByZW07IGJhY2tncm91bmQtY29sb3I6ICNm YWEiPgogICAgICA8cCBhbGlnbj0iY2VudGVyIj40MHJlbTwvcD4KICAgIDwvZGl2PgogIDwvZGl2 PgoKPC9ib2R5Pgo8L2h0bWw+Cg==