Bug 163893
| Summary: | transition: all changes font-size | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Robert <unknown9595> |
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | dino, mmaxfield, unknown9595 |
| Priority: | P2 | ||
| Version: | Safari 10 | ||
| Hardware: | iPhone / iPad | ||
| OS: | iOS 10 | ||
| URL: | http://codepen.io/unknown9595/pen/jrdRKK | ||
Robert
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
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |