<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - transition: all changes font-size"
href="https://bugs.webkit.org/show_bug.cgi?id=163893">163893</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>transition: all changes font-size
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 10
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iPhone / iPad
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 10
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Animations
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>unknown9595@hotmail.com
</td>
</tr>
<tr>
<th>CC</th>
<td>dino@apple.com
</td>
</tr></table>
<p>
<div>
<pre>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; <a href="http://codepen.io/unknown9595/pen/jrdRKK">http://codepen.io/unknown9595/pen/jrdRKK</a>
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</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>