Created attachment 316547 [details] .html document exhibiting the bug I've attached a static web page that exhibits the problem and shows how <html>'s bounding client rect is static when animating a surface containing `<input>` and how it changes when animating a surface containing `<input autofocus>`. This issue sounds like it might be related to Bug 131293, but I couldn't reproduce that bug.
<rdar://problem/33571236>
Does this happen if you don't use display:flex?
Chrome shows this same behavior. Firefox is similar; it pins the document to the left side, but the document width is still changing as the sidebar comes in. This is a weird way to animate in the sidebar, because the document width is changing (look at the scrollbars).
(In reply to Simon Fraser (smfr) from comment #2) > Does this happen if you don't use display:flex? Yes, it does. `display:flex` is only on the body causing the #surfaces div to be as tall as the window minus the height of the header. If you comment that out, you'll see the bug, it's just that the sidebar will only be 64px tall
(In reply to Simon Fraser (smfr) from comment #3) > Chrome shows this same behavior. Firefox is similar; it pins the document to > the left side, but the document width is still changing as the sidebar comes > in. > > This is a weird way to animate in the sidebar, because the document width is > changing (look at the scrollbars). Yeah, I noticed the scrollbars and thought at first that setting `max-width` on something would circumvent the problem; but part of strangeness here is that the widths of `#surfaces`, `body`, and `html` *aren't* changing. If you modify the step function in my example to output those values, you'll see what I mean.
Simon, I changed
Simon, I changed the summary to remove the part about "shrinking flex items" since that seems to be a red herring. If you remove all the flexbox CSS from my example, you can still see the bug: the page just looks goofier ;-)