New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 806560 link

Starred by 2 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Android
Pri: 2
Type: Bug



Sign in to add a comment

sticky header move one pixel up when I block the scroll on body Chrome mobile ONLY

Reported by matteowe...@googlemail.com, Jan 28 2018

Issue description

Steps to reproduce the problem:
It's a really weird problem I encounter only chrome mobile.

When you have a sticky header, using just position: sticky. 
Create some content so you can scroll.
Scroll before the end of the page and then add a prevent scrolling on body with the css property

overflow: hidden
The sticky header will move 1px up. This issue happen with position fixed too.

I created a demo, try on Android Chrome: https://run.plnkr.co/tCOjTUgjURu5Q2J5/

What is the expected behavior?
position sticky and fixed they should not move 1px

What went wrong?
position sticky and fixed are moving up

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 63.0.3239.111  Channel: stable
OS Version: 7.0.0; Moto G (4)
Flash Version: 

I reported this issue on stackoverflow to keep track of this weird behaviour https://stackoverflow.com/questions/48482928/sticky-header-move-one-pixel-up-when-i-block-the-scroll-on-body/48482929#48482929

As you could see on the page, a solution to avoid this bug was to use the property "overlow-y: hidden" instead of "overlow: hidden" to prevent the body scrolling.

But I think is still worth it to fix this bug from the browser because other browser do not have this problem
 
test-bug-sticky-movement.zip
4.6 KB Download
the demo link does not work, hopefully this should work https://run.plnkr.co/plunks/jE0y50KjpqxaYqeHWm2Q/
Labels: Needs-triage-Mobile
Cc: pnangunoori@chromium.org
Labels: Triaged-Mobile Needs-Feedback
Tested the issue on the issue on reported Chrome #63.0.3239.111 and latest Stable #64.0.3282.123 and not able to reproduce the issue by following the below steps:

1. Launched the Chrome browser.
2. Navigated to the URL: https://run.plnkr.co/plunks/jE0y50KjpqxaYqeHWm2Q/
3. Scroll the device up.
4. Sticky header part "some header content" doesn't seems to move up by a pixel.

Android:
7.0.0

Device:
Moto G (4) Build/NPJS25.93-14-13

matteowebdesigner@ -- Could you please update your Chrome to latest stable #64.0.3282.123 once it is available and please provide the screencast of the issue, it will help us in further triaging the issue.

Please let us know if anything is missed.

Thanks in advance!

Comment 4 Deleted

Sorry I was not clear.

1. Open link on Android Chrome
2. Scroll down but do not reach the end of the page
3. Click on the button toogle scroll. I recommend to keep toogling to notice the movement of the header.

Project Member

Comment 6 by sheriffbot@chromium.org, Jan 29 2018

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "pnangunoori@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: Needs-Bisect
Cc: nyerramilli@chromium.org sandeepkumars@chromium.org
Labels: -Needs-Bisect M-66
Status: Untriaged (was: Unconfirmed)
Tested the issue in Android and able to reproduce the issue. Similar behavior is observed since Chrome #59.0.3030.0

Steps Followed:
1. Launched the Chrome Browser.
2. Navigate to the URL: https://run.plnkr.co/plunks/jE0y50KjpqxaYqeHWm2Q/
3. Tap on the “toogle scroll” button
4. Scroll the screen up and scroll down
5. Repeat the steps 3 & 4 for some time.
6. Observed that “some header content” part seems to move by a pixel.

Chrome versions tested:
59.0.3030.0, 64.0.3282.123(Stable), 66.0.3334.0(Canary)

OS:
Android 8

Android Devices:
Pixel XL

This seems to be a Non-Regression issue as same behavior is seen since M59. Hence removing the ‘Needs-Bisect’ label. Untriaged for further input's on this issue.

Please navigate to below link for log's and video--
go/chrome-androidlogs/806560

Note: 
This issue is not observed in Desktop.

Comment 9 by e...@chromium.org, Jan 30 2018

Components: -Blink>CSS Blink>Scroll
Components: -Blink>Scroll Internals>Compositing>Scroll
Owner: flackr@chromium.org
Status: Assigned (was: Untriaged)
position sticky issue.
Cc: yigu@chromium.org
Owner: smcgruer@chromium.org
Can you take a look and/or reassign? Note that this requires the combination of high DPI and sticky. I think the issue may be that we don't get the fractional scroll offset when overflow is changed to hidden (possibly issue 414283), or that main thread sticky position simply isn't aware of fractional scroll offsets (issue 485650 - I think it wouldn't reproduce on ChromeOS if this is the case).
Labels: Needs-TestConfirmation
I am coming to this very late, but I was unable to reproduce this on M73 (current Canary) on my Oneplus 3T Android phone. I see from #8 that this is difficult to reproduce, but even after a few minutes I wasn't able to do so.

Adding Needs-TestConfirmation to see if it can be confirmed as no longer reproducing. Whoever tries to reproduce this, you can check comment #8 for a previous successful reproduction.

Sign in to add a comment