Bug 130378 (rem-resize-jank)

Summary:

Resizing around responsive boundaries when using rem unit causes jank/jitter

Product:

WebKit

Reporter:

Sami Samhuri <sami.samhuri>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

fluehrm

Priority:

Version:

528+ (Nightly build)

Hardware:

Mac (Intel)

OS:

OS X 10.9

URL:

http://samhuri.net/f/grid-bug.html

Attachments:

Description	Flags
test case	none

Sami Samhuri

Reported 2014-03-17 18:20:59 PDT

Created attachment 226994 [details] 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

Attachments
test case (589 bytes, text/html) 2014-03-17 18:20 PDT, Sami Samhuri	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Sami Samhuri

Comment 1 2014-03-17 21:27:38 PDT

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.

Comment 2 2017-08-09 11:53:18 PDT

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!)

Note You need to log in before you can comment on or make changes to this bug.