Streaming live at 10am (PST)

Hover animation over GIF problem


#1

Hi everyone,

I’m designing a website where a gif video comes up on hover over Farsi text (It’s hard to explain, but please find the preview link below). I’m experiencing problems when published, as lines appear where the video overlaps the letters creating gaps of video or flickering.

I’m guessing it’s glitching because perhaps there’s a better way to build it? Any advice would be greatly appreciated!

Thank you,
Sim


Here is my site Read-Only: https://preview.webflow.com/preview/somayehs-website-2018?preview=79da7f741c778da81e1d79494dd3c35d


#2

Anybody? Plz halp :pray:t3:


#4

Hi @SimonaZ

Can you provide the published link too - i’m not seeing an issue on the designer preview mode…


#5

Hi there yes, http://somayehs-website-2018.webflow.io/

I’m not finding any flickering on desktop, but my client has. I can see the problem on mobile though.

Thank you


#6

Hey @StuM!

Did you have any luck with this? :slight_smile:


#7

I’m not seeing any issues either. Have you changing the z-index of the layers? In my experience flickering usually happen when two elements are on the same z-index and the broswer can’t decide which is on top.


#8

Hi @Alborz_Heydaryan,

No, the only Z-index is a Z-1 on the gif itself so it appears behind all of the other layers.

@cyberdave @StuM @Alborz_Heydaryan I’ve attached a screenshot of the problem - I’m only seeing this on mobile when it’s landscape. It’s just a line between the two letters.

Thank you for all of your help :slight_smile:


#9

Also just saw another line pop up (after the last letter) on mobile portrait - it disappeared when I refreshed.


#10

I can see the line. It looks like they are showing from the edges when the edges are not touching perfectly.

I’m guessing you have layers that are touching perfectly on desktop, but on mobile, due to re-sizing and the anti-aliasing that the browser does, sometimes the layers that are perfectly matching can show a bit of a border around them.

Easiest fix would be to make the layers that are underneath 1 pixels smaller.

This is not ideal in all cases but it should fix the issue.