Any better way to archieve thos hover effect? Or fix safari issue


I have made a hover effect that I want to use on a grid. I’m using inline SVG to archieve it atm. It works fine in Chrome and Firefox but in Safari I get white lines on SOME of the griditems when hovering, and I have no idea why. Does anyone know why I get these and if there is a fix to it?
Or maybe there is a better way of doing this effect?

Here is a pen: check it in safari to see the white lines i’m talking about.


FYI - I see white lines in Firefox, too. Depends on the window width. Wide seems OK, narrow gives a vertical line moving fast horizontally across the width of the rectangle.

Hmm okey thanks for noticing. Any idea why this might be?

Sorry, I have no idea.

Obligatory question; Safari for Windows, or Safari for Mac?

Safari and firefox for Mac.

Maybe something like this.

I suppose it depends on what your criteria are?

1 Like

Cool man, didn’t think about using borders for the triangle!=) Thx! I changed it a bit so that its using translate3d for smoother animation.

enter link description here

Hi again,

Im trying to make it so that the triangle can take the size of its parent. (So i can just add it as a class to any elements)

Trying to calculate the width and height using jquery, dunno what I’m doing wrong here tho, .

EDIT: nevermind i forgot document ready

EDIT2: Anyone know how to deal with subpixels because of jquery width(); rounding?

EDIT3: nevermind again. used [0].getBoundingClientRect();.

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