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.