[Webkit-unassigned] [Bug 253399] New: Incorrect cropping of fixed position elements taller than viewport on MobileSafari
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Sat Mar 4 14:47:45 PST 2023
https://bugs.webkit.org/show_bug.cgi?id=253399
Bug ID: 253399
Summary: Incorrect cropping of fixed position elements taller
than viewport on MobileSafari
Product: WebKit
Version: Safari Technology Preview
Hardware: iPhone / iPad
OS: iOS 16
Status: NEW
Severity: Normal
Priority: P2
Component: Layout and Rendering
Assignee: webkit-unassigned at lists.webkit.org
Reporter: luke at deentaylor.com
CC: bfulgham at webkit.org, simon.fraser at apple.com,
zalan at apple.com
Created attachment 465298
--> https://bugs.webkit.org/attachment.cgi?id=465298&action=review
Showing the buggy behavior (first) and the desired behavior (second)
On iOS Safari, a fixed position element that is (1) taller than the viewport and (2) non-empty will be visually cropped to 100dvh height even if it is taller than that. This creates awkward jank when scrolling, because the element is visibly too small while the bottom UI is collapsing on scroll (see the first part of the attached video, with the red background). If the element is empty this bug does not occur (see the second part of the attached animation, with the green background—the element is visible behind the bottom bar and no visible jank occurs when the bottom bar collapses).
The incorrect behavior can be reproduced with the following reproduction:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background: blue; margin: 0; padding-bottom: 300vh;">
<div style="display: contents;">
<div style="position: fixed; height: 100lvh; width: 100%; background: red;">
test
</div>
</div>
</body>
</html>
The bug does not occur if the div is empty, i.e. if “test” is removed or commented out.
--
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/20230304/2b57f864/attachment-0001.htm>
More information about the webkit-unassigned
mailing list