Streaming live at 10am (PST)

Scrolling to the bottom is cropped in Safari

#1

Hi,
The bottom of the content “Tabs Content” is cropped when viewing in Safari. In e.g. Chrome the bottom is visible. If I enable overflow -> scroll for “tabs 3”, I can scroll to the bottom in Safari but there is a double scrollbar.

Any ideas how to solve this? Thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

Hi @wafram, to answer your issue with Safari, you are using VH in your max height. Safari is very literal with the VH view. Your view is taller than 100VH and therefore would need to be expanded to 200VH to account for the massive scrolling function.

Once I made this adjustment it works perfectly in Safari. The change comes on the class=“Tab Pane Tab 2”

Please double check your VH and VW uses. These are great with non-scrolling sections, although you can use them with scrollable sections, you would just need to account for the overall size factor.

Take for instance the main Webflow Marketing page. When you scroll through the main page and come across the section of the angled grid elements, that has a 500 or 600vh height to it, to allow for the length of the scroll.

Remember, VH stands for Viewable Height. Meaning that what you see in that defined section is what the user will see based on their screen resolution. You can go beyond 100VH for viewing purposes.

100VW would work the same way if you wanted a horizontal scrolling action.

Hope that answers your question for you.

2 Likes
#3

Hi @WebDev_Brandon

Thanks for the explanation. It works perfectly now

1 Like