Links are clickable even though containing div is display: none

Design help Animations & Interactions
1

Hi all,

I have a weird issue that only seems to occur on mobile on iPhone. We have an interaction so that when you hover over a block, a press logo fades out and links to the press article(s) fade in. The div that contains the links starts out display: none and switches to display: flex, then opacity goes from 0 to 100%. The div containing the logo does the opposite (fades out then switches to display: none). When you hover out, the opposite happens.

On iPhone, when you tap on the image, if you tap in the spot where the link is located underneath, it takes you to the linked article. This shouldn’t be clickable because it is in a div with display: none, and there is a .2 second delay before the change to the display property.

Has anyone experienced something like this or know how I might be able to fix it? FYI, on a Google Pixel I do not have this problem. It works as expected.

Thank you!

Here is my public share link: Webflow - Hayley English Interiors

2

Hi,
try removing the custom code and add a z-index to your wrappers.

For example 200 for the image and 100 for the link.

Ff that doesn’t work add another interaction for mobile where instead of hover you use onClick.

Hope this helps :slight_smile:

1 Like
3

You’re a genius! I didn’t even have to change the z-index. Just reversed the order of Links-Wrapper and Logo-Wrapper in the navigator.

Thank you Julian!!!

1 Like