[Webkit-unassigned] [Bug 244381] New: [iOS] Scrolling artifacts using fixed divs and lvh units
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Fri Aug 26 00:27:15 PDT 2022
https://bugs.webkit.org/show_bug.cgi?id=244381
Bug ID: 244381
Summary: [iOS] Scrolling artifacts using fixed divs and lvh
units
Product: WebKit
Version: WebKit Nightly Build
Hardware: Unspecified
OS: Unspecified
Status: NEW
Severity: Normal
Priority: P2
Component: Scrolling
Assignee: webkit-unassigned at lists.webkit.org
Reporter: jonlee554 at gmail.com
CC: simon.fraser at apple.com
iOS 15.6.1, scroll the home page https://greermuldowney.com
there is this markup:
<div id="background" style="background-image:...; position: fixed; width: 100%; height: 100lvh; top: 0; left: 0;"></div>
<div id="overlay" style="-webkit-backdrop-blur:...; position: fixed; width: 100%; height: 100lvh; top: 0; left: 0;"></div>
[I currently use backdrop blur because blurring the background image directly creates a halo around the viewport. Even with this solution I still see a halo on the bottom edge in iOS Safari.]
Scroll down. While in momentum, the bottom chunk is white, and then at some point the rest of the image comes in. Fingers down scrolling, I see the image filling out the viewport dynamically initially.
I see similar behavior in both Tab Bar and Single Tab modes.
With layer borders on it seems like the div is not sized to "100lvh" but is sized more like "100dvh". I would have expected lvh to not change between the two bar states.
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220826/7910e1e7/attachment.htm>
More information about the webkit-unassigned
mailing list