Bug 163893 - transition: all changes font-size
Summary: transition: all changes font-size
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 10
Hardware: iPhone / iPad iOS 10
: P2 Normal
Assignee: Nobody
URL: http://codepen.io/unknown9595/pen/jrdRKK
Keywords:
Depends on:
Blocks:
 
Reported: 2016-10-24 08:32 PDT by Robert
Modified: 2016-10-24 10:02 PDT (History)
3 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Robert 2016-10-24 08:32:22 PDT
Overview:
I was getting an issue on a live site, where tapping on a form would alter the font-size, making it grown and shrink very quickly and causing a reflow.

This is only an issue on iOS10 > 10.0.3 Safari on iPhone, doesn't affect iPad or Desktop Safari

I've boiled it down to a simple codepen, its quite hard to trigger, normally adding an click eventListener would make it easier, but for simplicity this is how to replicate it. 

Go to this codepen; http://codepen.io/unknown9595/pen/jrdRKK
The P tags have only one style; 'transition: all'
If you inspect the P tags in inspector (might be easier to download the codepen)
In CSS Styles panel, trigger either 'hover', 'active', 'focus'
The font sizes will grow and shrink
Based on only having one CSS rule, nothing should change.

Expected Results: What the application should have done, were the bug not present.
Font size should not change.

Build Date & Platform: iOS10 on iPhone

Additional Builds and Platforms: Only iPhone iOS10