Tab menu items disappearing when published on tablet and mobile

Emilie_Ho · September 2, 2021, 2:03am

Hi Webflow Community,

I have 2 tabs in my website. The tab menu behaves fine on web (including none, hover and pressed states), however the menu item would disappear when I try to click it on tablet or mobile. It would look like this:

Please let me know what I did wrong. Thank you so much!

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

RDaneelOliwav · September 2, 2021, 2:38am

Hi!

In the designer it works fine, your published page is pw protected, so I can’t troubleshoot your issue!

Emilie_Ho · September 2, 2021, 2:45am

@RDaneelOliwav Sorry I forgot - the password is makethedot2021

RDaneelOliwav · September 2, 2021, 3:35am

What browser are you using?
I tested Chromium and ff and it works normally.

Emilie_Ho · September 2, 2021, 4:01am

@RDaneelOliwav I use an iphone X. I tried with both Chrome and Safari on my phone and it’s the same behavior of the tab item menu turning white (or disappearing) when clicked.

Emilie_Ho · September 8, 2021, 3:42am

Bumping this up to see if anyone has a fix for the disappearing tab menu on mobile

Project link: Webflow - Make The Dot

cyberdave · September 8, 2021, 5:07am

Hi @Emilie_Ho, thanks for the post, I took a look and it seems there is some styling on the published site that is clipping the background color to the text on the published site, it is related to the “Tab Link Verticle” class.

Removing this class and republishing causes the text to show on iphonex.

The root issue is that iphonex is not respecting the clipping option that clips the background to the text and this is set on the Tab Link Verticle Class when in the Current → Hover state:

I would try to set that class so that clipping is set to none as iPhoneX is unable to render that clipping mode on the tab button the same way as other browsers.

After changing that class, you might want to also change the background color of the current class on the tab link or it will show such as this with the background text clipping disabled:

I hope this helps!

Emilie_Ho · September 8, 2021, 5:35am

Thank you so much @cyberdave! I realized it was the conflict between hover and pressed states. Changing the clipping option worked immediately. Very grateful for your prompt reply!

cyberdave · September 8, 2021, 5:36am

Hi @Emilie_Ho, I am glad to help, seems there are others with clipping options in general on iOS, see here:

Glad to hear this is solved

system · September 9, 2021, 5:37am

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.