Bug on Safari Mobile, when switching the address bar up

[CodeXiD]

When switching the address bar up on Safari Mobile there is a problem with recalculating the location of elements, visually they are in the right place, but when clicked they don't work (because they are actually displayed in a different place when viewing the debug)

The screenshot shows that the "Collapse" button is lower than the blue block (the blue block is where the "Collapse" button is located according to dev-tools).

I tried to figure out the problem, I don't know for sure but I think the problem is safe-area-inset-top which is used to calculate the height (height: calc(100% - env(safe-area-inset-top) - 34px);)

Maybe it is adapted to the address bar at the bottom of the screen, I don't understand this topic enough, so if you can suggest, help or fix this behavior I would appreciate it.

By the way, not only the "Collapse" button behaves like this, but all elements inside the popup as well.

And also, this behavior is not reproducible on simulators, only on real devices.

[jadus]

Hi @CodeXiD , same issue here.
Did you find an answer ?

[khashashin]

I am experiencing the same issue on Chrome for Android. The header's position appears to be offset, likely due to an incorrect Y-axis transition calculation.

The Y-axis transition appears to be calculated incorrectly, causing the header to be displayed in the wrong position, see the screenshot:

After inspecting the behavior, it seems that manually setting the Y position to 0 resolves the issue and correctly aligns the header.

When the Y-axis transition is adjusted to 0, the header position is fixed as expected.

It seems the calculation for the Y-axis transition doesn’t account for certain conditions. This miscalculation shifts the header position.

Let me know if additional information is needed or if I can help test further fixes!