Streaming live at 10am (PST)

Overlay on click – weird behavior in mobile portrait

I have (color blend) overlays over an image link, with two interactions on it:

  1. the overlay is turned on on hover, and
  2. the overlay is turned on on click/tap, with a delay (to simulate the hover on mobile)

I works fine on all breakpoints, with the exception of mobile portrait:
when tapped (animation 2.) the overlay goes wider than the image and creates this weird border left and bottom. See screenshot.
It should just cover the image like on the other breakpoints.

What’s happening here and how can I fix it?
Thank you for your help!

(I’m looking at it on an iPhone 6S Plus, if that matters)

Read-only:
https://preview.webflow.com/preview/ornament-is-crime?utm_medium=preview_link&utm_source=designer&utm_content=ornament-is-crime&preview=67d6cc255726c5fa9db030eebf3f2545&workflow=preview

Anyone?!
Thank you!

Anyone has any suggestions?!

Seems to be the click/delay (hover-simulation on mobile devices) that’s causing this but the hover doesn’t – even though both animations are on the same element.
I can’t figure out why this is happening!

Help appreciated.

Hi @Rapha, thanks for the post. The first thing I would mention is that there is a custom code error on the page affecting the link delay, see here:

Shared with CloudApp

That looks like an error due to the code that is being run need to be put in the Before Body section of custom code as jQuery is not loaded until after the body is loaded.

After making the update, republish the site and then check again in case that code might have been some issue, other custom code may also affect the published site, so it is good to try and check if the issue happens when you temporarily remove the custom code.

Thank you, Dave!

I put the link-delay code into the Before Body section.
That didn’t solve the issue I’m after but instead created a new issue: the links to the products were now disabled. So I had to put the code back into the Before Header.
Then I temporarily removed the code all together. That didn’t help either.

Besides that, all animations/interactions (hover, link, click…) are done with WF (not custom code) I think.
Other than that I have collection sort/filter code on that page, plus embeds for device queries (to control columns and gaps) and for “show more” custom pagination. But I can’t imagine one of these codes causing the problem?

It’s really the color blend hover div that extends beyond the right and bottom edge of the image that’s one z-level under it (z-level 1).
The hovers (one is just text, the other conditionally visible color overlays) are all set to absolute/full, the text hover to flex (z-level 3) and the color hover to block (z-level 2).
One distinction is that this issue only happens on mobile devices, not on desktop.

Not sure how else to investigate.
Attached a console screenshot (errors).

Solved.
My bad. The image behind the overlay needed to have 100% width/height.
I thought default (auto) would do that already and stretch the image all the way but looks like it needs to be forced to fill that space.

1 Like

hi @Rapha I would like to just clear that size auto auto will retain element original size that can be for example 0px. This mean that auto and 100% are two different things :wink:

That’s a good explanation. thank you!

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