Carousel 100vh on mobile not working

[DLB]

Hi @arminunruh

Thanks for the updates!

I still have an issue with the Carousel plugin on iOS / iPhone using the Safari browser, since yesterday’s updates. The fixed height does not display at 100vh – even though it’s set to that!

I've also tested it on the iOS Chrome and Firefox browsers and they display the Carousel with a fixed height at 100vh perfectly – just doesn't work on iOS Safari for some reason?

Prior to yesterday’s updates the Carousel worked fine for me at 100vh on iOS Safari.

The Carousel 100vh works fine for me on desktop though, on macOS Safari, Chrome, and Firefox.

Thanks again, for fixing the Carousel text slide positioning.

Des

[arminunruh]

do u have a link?¿

[DLB]

Hi @arminunruh

Link: https://deslloydbehari.co.uk/repository/

[arminunruh]

:D

nice website

so, what exactly is browser height on an iphone safari,
that's an interesting question

look at this picture
… ok i cant seem to upload images anymore, theres a bug in the forum.

anyway, the problem is when you scroll down, the bars on the top and bottom of safari's browser are removed. so 100vh is actually different from when you scroll up and scroll down.

the current 100vh is calculated for when the browser shows these bars

i will think about a solution to this, i wrote it down

[arminunruh]

ok,

here, a screenshot of the browser bars invisible:

and here is a screenshot of the browser bars visible:

[DLB]

@arminunruh Thanks for checking — really appreciate it. Hope you’re able to find a solution soon. Thanks for the compliment too — it's a cool theme to work with!

[no_caller_id]

Hi everyone, is there an update on this? I'm running into the same issue. Tried to fix it via THIS solution, however it didn’t work for me with just CSS.

How can I implement the Javascript solution in Lay Theme?

Thanks for your help!

[Richard]

Dear @no_caller_id

This was two years ago so just to clraify that it's about "space" that sometimes occurs at the bottom of a layout on Safari Mobile?

Are you able to post a link to your website with issue in question 🔍

I think Armin is looking into this as the new IOS has created some bugs with the Address/Navigation bar. Are you able to do some test to remove the menu bar in > Customize >

In the past this was the issue as the 100vh calculated the Menu Bar into it and created this space. (e.g 60px height of white space).

---

Talk soon & best wishes 🌻

Richard

[no_caller_id]

Dear @Richard

Thanks for looking into this. Yes it is about the space that occurs at the bottom, causing the footer area to disappear behind the navigation elements (mainly a Safari issue, it is working without problem in Firefox and Chrome).

I also have the issue when viewing the website on my iPad.

I already have the menu bar on "hide" in the customization menu.
Besides that the only element is the carousel with 100vh.

The link to my website is here: www.robinbrass.com

Another issue I have is when creating longer captions, with possibly two lines when viewed in mobile, for the inidvidual images in the carousel. This causes all captions to add one empty line below the text, resulting in the text not sitting on the bottom.

In general, would you rather advise to use the Fullscreen Slider Plugin in for my purpose?

Thanks and best wishes,
R

[Richard]

Dear R

@no_caller_id

Best wishes, hope you had a nice holiday season 🌝

Regarding the space at bottom on Safari IOS, I believe Armin is aware of this along with a few other users with similar bug, so should be worked out soon.

"causes all captions to add one empty line below the text, resulting in the text not sitting on the bottom."

The Single line captions you have sit higher - Should the two line comments on Mobile also sit higher?

---

Have a wonderful start to 2022 ✨

Richard