Issue - white lines around animations/interactive elements


(Russ Luscombe) #1

On some screen sizes, any animation or interactive element that appears on my website sometimes has a white line around it. Obviously, creating the Hype doc with the same background colour as the website is supposed to make the join invisible. The bug normally occurs on 13" laptop screens. My website is here - www.mechanical.house

Any help appreciated!


#2

Looks good to me. Are you on retina? Non retina? What browser?

Can you send a screenshot of the issue you’re seeing?

Can you try turning off ‘Use Webkit Graphics Acceleration’ in the document inspector and seeing if that resolves the issue?


(Russ Luscombe) #3

Hey Daniel, thanks for your reply.

I just tried turning off the Webkit Graphics Acceleration but no luck. Here’s a screenshot of the kind of thing I’m seeing. The bottom right should be a seamless little animation but you can see two sides of it with the white outlines. Again, this doesn’t seem to appear on every computer I check it on. Weird huh!

Oh, and I’m currently only seeing the issue on a 2012 non retina 13" Macbook Pro, using Safari.


#4

Maybe check your top and left values for the specific elements. I’m seeing a few with 1px on the Y axis which would enable the background to seep through a little.


(Russ Luscombe) #5

I think you’ve nailed it. I thought I’d checked that but I just fixed one (hopefully permanently!) so that’s probably it. I’ll check back if not. Thanks.