Problem: On DOM ready automatic CSS explode from user-agent defaults to applied styles. The "explode" cased in HTML with at least 3 input elements in form and applied CSS transition by external style sheets to whatever element.
Expected result: no on load transition "explode", fire transition just on call to action, like :hover, DOM className change, etc.
External style input.css.foo { width: 10em; padding: 3em; margin: 1em; font-size: 200%; background-color: red; border: 1em solid #eee; border-radius: 1em; box-shadow: 0 0 1em #aaa; transition-duration: 3s; /* transition makes the bug noticable */ }
Problem cased HTML by at least 3 input elements single input element in form.
Update: On Chrome 52 stable and Chrome 54 canary noticed the bug happens also with single input element.
<p class=foo>If this box expands in animation, then the issue is still not fixed.</p> <form hidden> <input><input type=text><input type=email></form>
If this box expands in animation, then the issue is still not fixed.
As you can see the test case, the transition animation is rendered from user-agent stylesheet defaults, noticeable in "explode" of width, padding, font-size, background-color, border, etc.