Bug 174892

Summary: When animating in a sidebar, if it contains an <input> with autofocus, the page scrolls sideways
Product: WebKit Reporter: Bob Lail <bob.lail>
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: dino, hyatt, jonlee, matt.kobs, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 10   
Hardware: Mac   
OS: macOS 10.12   
Attachments:
Description Flags
.html document exhibiting the bug none

Bob Lail
Reported 2017-07-27 08:20:59 PDT
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.
Attachments
.html document exhibiting the bug (2.51 KB, text/html)
2017-07-27 08:20 PDT, Bob Lail 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2017-07-27 10:57:08 PDT
<rdar://problem/33571236>
Simon Fraser (smfr)
Comment 2 2017-07-27 22:20:57 PDT
Does this happen if you don't use display:flex?
Simon Fraser (smfr)
Comment 3 2017-07-27 22:23:37 PDT
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).
Bob Lail
Comment 4 2017-07-28 05:49:02 PDT
(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
Bob Lail
Comment 5 2017-07-28 05:52:32 PDT
(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.
Bob Lail
Comment 6 2017-07-28 05:54:58 PDT
Simon, I changed
Bob Lail
Comment 7 2017-07-28 05:56:17 PDT
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 ;-)
Note You need to log in before you can comment on or make changes to this bug.