Bug 244381 - [iOS] Scrolling artifacts using fixed divs and lvh units
Summary: [iOS] Scrolling artifacts using fixed divs and lvh units
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL: https://greermuldowney.com/
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-08-26 00:27 PDT by Jon Lee
Modified: 2022-09-02 00:28 PDT (History)
3 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Jon Lee 2022-08-26 00:27:15 PDT
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.
Comment 1 Radar WebKit Bug Importer 2022-09-02 00:28:15 PDT
<rdar://problem/99477149>