Bug 130378 (rem-resize-jank) - Resizing around responsive boundaries when using rem unit causes jank/jitter
Summary: Resizing around responsive boundaries when using rem unit causes jank/jitter
Status: NEW
Alias: rem-resize-jank
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac (Intel) OS X 10.9
: P2 Normal
Assignee: Nobody
URL: http://samhuri.net/f/grid-bug.html
Keywords:
Depends on:
Blocks:
 
Reported: 2014-03-17 18:20 PDT by Sami Samhuri
Modified: 2017-08-09 11:53 PDT (History)
1 user (show)

See Also:


Attachments
test case (589 bytes, text/html)
2014-03-17 18:20 PDT, Sami Samhuri
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Sami Samhuri 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
Comment 1 Sami Samhuri 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 MF 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!)