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!
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.
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.
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.
