Created attachment 465298 [details] 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.
I’m not sure how to verify this bug exists in Nightly, since it’s specific to the dynamic viewport behavior of iOS safari; I did verify this bug exists in the most recent iOS 16.4 developer beta, however.
We crop position:fixed to viewport size because we assume the rest will never be visible, but we need to use the larger viewport size to do this.
<rdar://problem/106310384>