Scroll jumping to top in WSJ |
|||||
Issue descriptionVersion: M55 (Dev) 55.0.2875.4 OS: Android What steps will reproduce the problem? (1) visit: http://blogs.wsj.com/washwire/2016/09/26/donald-trump-on-not-paying-taxes-that-makes-me-smart/ Note: make sure that it is the full article not the shortened version. (2) Try to scroll down. (3) What is the expected output? Page should scroll down What do you see instead? Page jumps back up at the beginning (around first 300px or so)
,
Oct 3 2016
This article is behind a paywall. Are you able to repro on a locally saved copy?
,
Oct 3 2016
Yes. I can on my phone. I turned off the "Scroll Anchoring" in chrome://flags but it still repros. Yash mentioned there is a bug in flag implementation which cause it to now actually disable. Happy to test other things. I have attached a recording of how it looks.
,
Oct 3 2016
BTW, I can bypass the paywall by searching it on Google (perhaps in a separate profile) and getting to the link.
,
Oct 3 2016
I can repro this using dev tools mobile emulation. Confirmed that we're making an incorrect adjustment. Looking further..
,
Oct 7 2016
hmmm, this is an interesting one. So the page has a header that becomes fixed when the user starts to scroll past it. They are not compensating for the jump caused by the change in flowness, so we expect our flowness suppression change from issue 641814 to disable anchoring, but that fails. Upon taking a closer look.. This is WSJs top nav experience: hide the header when the user scrolls past it, and only show it when the user is scrolling in the upward direction. They first hide the header using display:none, and then attach position:fixed to it. The two things happen in different layout passes, and we don't suppress scroll anchoring in the former case. This is what causes the incorrect adjustment, as it did before the inflowness change suppression. Minimized-repro: https://jsbin.com/pajadeg/quiet Should we suppress anchoring for changes to the 'display' property to any element in the scroller? I worry that there's probably other cases like these?
,
Oct 7 2016
This site jumps a lot without scroll anchoring when you hit the boundary point. I wonder if we should just try to contact WSJ and ask them to fix their site? A fix that prevented jumping would also serve to make it work with scroll anchoring. I suspect if we tell them a small change they could make to fix the jumping that we could get them to fix this.
,
Oct 7 2016
Yeah its a good idea to reach out to WSJ to fix the jumping issue. I am more worried about other sites that may also do this in the wild who we can't reach out to. We probably need a more scaleable solution here, WDYT?
,
Oct 18 2016
I also tested on my N5 running M55 with the Scroll Anchoring flag set to enabled and have been unable to reproduce it. Here are the steps I'm following: 1. Open an incognito window 2. Navigate to google.com and search for "http://blogs.wsj.com/washwire/2016/09/26/donald-trump-on-not-paying-taxes-that-makes-me-smart/" 3. Select the appropriate result and wait for it to complete loading 4. Scroll far enough down so that the navbar is out of view Correct Behavior: Scroll stays at mid-page Incorrect Behavior: Scroll snaps to top Actual Behavior: Scroll stays at mid-page
,
Oct 18 2016
This appears to be fixed. I'm not sure how. ymalik, you willing to do a bisect so we can be sure it's something we changed?
,
Oct 18 2016
I can still repro this on ToT.
I suspect that the reason you weren't able to repro this is due to the subtle difference in behavior depending on the screen width.
You will notice that if the screen width is big enough, there is a carousel right under the header (see attached image). I found this CSS for the carousel:
@media (max-width: 660px)
.hide4 {
display: none;
}
i.e., hide the carousel on small screens.
If there is a carousel, this bug doesn't happen (AND the page doesn't jump because of the header changing in-flow ness / visibility). If the carousel is hidden, the bug happens.
Can you verify that this bug is still repro able by making the window smaller?
Upon further investigation, I found that there is also the following CSS in the page:
.subType-unsubscribed .mega-nav.mobile.stick-mobile-nav+* {
padding-top: 109px;
}
This translates to "apply padding-top: 109px on the element right after the header element when the header becomes out of flow".
i.e., the page is in fact trying to compensate for the jump caused by the inflow change (contrary to what I said in comment 6).
The reason this does nothing on small screens is because the element right after the header is the carousel, which is hidden.
So to fix this, I think all WSJ would have to do is add a placeholder div right after the header to which the compensating padding will apply.
,
Nov 15 2016
I believe that fixing this is on WSJ's roadmap and there isn't anything for us to do here.
,
Jan 11 2017
|
|||||
►
Sign in to add a comment |
|||||
Comment 1 by majidvp@chromium.org
, Oct 3 2016