Weird space on mobile devices - absolute-bottom

[tomasmarek (ThomasM)]

Hello guys,

I have this .svg scroll shape on the bottom of my page. I use absolute-bottom for this element. It works fine on the desktop devices but there is some weird space on mobile devices when I scroll the page.

This is probably due to top n bottom Safari bar. Any solutions please?

I found this https://stackoverflow.com/questions/33039537/ios9-mobile-safari-landscape-css-bug-with-positionabsolute-bottom0

---

Here is my site Read-Only: https://preview.webflow.com/preview/real-estate-0ad8d3-ef3f3cff9798179abb3f?utm_medium=preview_link&utm_source=dashboard&utm_content=real-estate-0ad8d3-ef3f3cff9798179abb3f&preview=b930eb051a646990a8f931b16eafb879&mode=preview

[webdev (Jeff S)]

Here is a solution.

[tomasmarek (ThomasM)]

Unfortunately, it does not solve the problem.

It works fine on desktop PC.

That issue appears on mobile devices (related to their browsers). Because my Hero Height is 100vh. 100vh is red area. I need some workaround to make 100vh like green area otherwise resizing animation of Safari bars makes that weird gap.

It’s weird because my .svg img is aligned with the bottom Safari bar but Background is 100vh
extended to the bottom of the screen.

I don’t know if I explained it correctly

[tomasmarek (ThomasM)]

[tomasmarek (ThomasM)]

Hello, I found the way how to fix my issue. I had 100vh on my Section and Background video as well.

Section has to be 100vh and background video at 100% height. This fixed my problem with the iPhone screen.