Pixel-bug when using both position:sticky and transform:translate3d(...)
Reported by
kapo...@gmail.com,
Mar 13 2018
|
||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36 Steps to reproduce the problem: In the attached test case, the pink sticky div overlaps the dark red footer by half a pixel. If I remove "transform: translate3d(50px, 0, 0)" from the #main div, the issue is gone. What is the expected behavior? What went wrong? Compare the attached screenshots: - without-3d-transform.png: sub-pixel vertical overlapping - with-3d-overlapping: overlapping (+ on_windows.png: same bug) Did this work before? N/A Does this work in other browsers? No Bug confirmed on Google Chrome 65.0.3325.146 on Windows, with a different font-size value. (The bug depends on a mix of CSS properties, not just one, so that it's necessary to "play" a bit with the values to reproduce it, especially font-size.) Chrome version: 62.0.3202.89 Channel: n/a OS Version: buster/sid Flash Version:
,
Mar 13 2018
Bisect info: 420143 (good) - 420151 (bad) https://chromium.googlesource.com/chromium/src/+log/765fbff4..c25b23ac?pretty=fuller Suspecting r420144 = 2215b4e8cb1fb332ad6e7b495435deb3f89f41f8 = https://crrev.com/2251303003 by flackr@chromium.org "Implement position: sticky updates on compositor" Landed in 55.0.2868.0 Note, bisect required "--enable-experimental-web-platform-features" command line flag because position:sticky wasn't enabled by default in old Chrome.
,
Mar 14 2018
Able to reproduce this issue on reported version 62.0.3202.89, on latest stable 65.0.3325.162, on latest canary 67.0.3370.0 using Windows 10, Ubuntu 14.04 and Mac 10.13.3 with attached HTML file. i.e; The pink sticky div overlaps the dark red footer. This issue is seen from M-60. Hence considering this issue as Non-Regression and marking as Untriaged. cc'ing dev from r420144 from comment#2. Please have a look at this issue
,
Mar 14 2018
,
Mar 14 2018
As expected, this is a sub-pixel sizing bug. Adjusting the browser zoom on Linux makes the problem appear and disappear. We're unlikely to fix it any time soon. A workaround may be adjust the z-index to make sure the footer renders on top, assuming it's opaque.
,
Mar 14 2018
To #5: In the provided test case, the footer has already a higher z-index than the sticky div, but it does not help. I'm not aware of any workaround for this issue. |
||||||||||||
►
Sign in to add a comment |
||||||||||||
Comment 1 by viswa.karala@chromium.org
, Mar 13 2018