Bug Description
In cellular Safari, when the tackle bar is positioned on the backside, or when it is minimized, a difficulty arises with blocks positioned on the backside of the web page: their UI and precise positions now 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 consumer clicks the OK button, the clicking truly happens above the button, and the datepicker closes with out saving the consequence.
The bug solely reproduces on Safari browsers with the tackle bar on the backside. If Safari’s tackle bar is on the high, or when you’re utilizing a distinct browser, the bug will not happen.
Options that did not work
Options I used for guardian 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,high - Moved it to different guardian containers, all the best way all the way 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 tackle bar remained. And after I tried shifting the block down, it was lower off:
Attention-grabbing observations
There are additionally some attention-grabbing observations that I am undecided learn how to interpret. The desk exhibits totally different web page heights relying on the tackle bar dimension.
| Top | Worth at most tackle bar peak | Worth at minimal tackle bar peak |
|---|---|---|
window.innerHeight |
714 | 754 |
visualViewport.peak |
714 | 730 |
doc.documentElement.clientHeight |
714 | 714 |
The next issues are noteworthy:
- When the tackle bar peak is most (that’s, when there isn’t any bug), all of the heights are the identical.
- When the tackle bar peak is minimal (that’s, when there’s a bug), the heights are totally different.
- The distinction between
window.innerHeightandvisualViewport.peak(24 pixels) is the dimensions of the hole between the block and the tackle bar.
Reproducible instance
As a reminder, the bug can solely be reproduced on cellular Safari, which has the tackle bar on the backside. The bug seems if the tackle bar is simply too small. To do that, scroll down the web page.
After 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 tackle bar’s peak.
