Bug Description
In cell Safari, when the handle bar is positioned on the backside, or when it is minimized, a problem arises with blocks positioned on the backside of the web page: their UI and precise positions not match. The screenshots present that the block positions within the UI and the block positions as seen by Devtools are inconsistent. This misalignment results in annoying bugs. For instance, if the person clicks the OK button, the clicking really happens above the button, and the datepicker closes with out saving the consequence.
The bug solely reproduces on Safari browsers with the handle bar on the backside. If Safari’s handle bar is on the prime, or for those who’re utilizing a distinct browser, the bug will not happen.
Options that did not work
Options I used for dad or mum containers:
- Modified
peakandmin-heightto100vh,100lvh,100svh,100dvh,-webkit-fill-availableutilizing CSS and JS - Eliminated
overflow
Options I used for the block itself:
- Modified
place - Moved it down utilizing
rework: translateY(),translate,padding,backside,prime - Moved it to different dad or mum containers, all the best way right down to
<html />(out of desperation) - I additionally tried utilizing
env(), however I am undecided if that is proper.
In all circumstances, the hole between the block and the handle bar remained. And once I tried shifting the block down, it was minimize off:
Fascinating observations
There are additionally some fascinating observations that I am undecided learn how to interpret. The desk reveals completely different web page heights relying on the handle bar dimension.
| Top | Worth at most handle bar peak | Worth at minimal handle bar peak |
|---|---|---|
window.innerHeight |
714 | 754 |
visualViewport.peak |
714 | 730 |
doc.documentElement.clientHeight |
714 | 714 |
The next issues are noteworthy:
- When the handle bar peak is most (that’s, when there isn’t any bug), all of the heights are the identical.
- When the handle bar peak is minimal (that’s, when there’s a bug), the heights are completely different.
- The distinction between
window.innerHeightandvisualViewport.peak(24 pixels) is the scale of the hole between the block and the handle bar.
Reproducible instance
As a reminder, the bug can solely be reproduced on cell Safari, which has the handle bar on the backside. The bug seems if the handle bar is just too small. To do that, scroll down the web page.
Once I created this instance, for some cause the bug did not happen, however the subsequent day it lastly turned reproducible 🤷♂️
My objective
My resolution is to make sure that the precise place of the element and its place within the UI match, whatever the handle bar’s peak.
