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 descriptionSteps 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
,
Jan 29 2018
,
Jan 29 2018
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!
,
Jan 29 2018
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.
,
Jan 29 2018
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
,
Jan 29 2018
,
Jan 30 2018
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.
,
Jan 30 2018
,
Feb 1 2018
position sticky issue.
,
May 15 2018
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).
,
Jan 8
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 |
||||||||||
Comment 1 by matteowe...@googlemail.com
, Jan 28 2018