Jump to content
Search Community

Artefacts on 3d tranformed divs with firefox

puluch test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



Thanks again for your amazing green socks.


I just started to play with gsap a few weeks ago but i have some artefacts with one of my animation :  on firefox (and with chrome but those one are acceptable) : when the squares opens up, i have some lines drawing on top of each triangle.


I tried a lot of changes on my div "triangle" and switch those divs to svgs but the result is the same i still have these unexpected borders and lines.


Any clue ?


Thanks a lot!


PS : if you want to see the animation in it context : http://www.curseur-et-bergamote.frand of course if an animation can be useful to someone, jusk ask me, it'll be a pleasure to speak about and help you (ohhhh yes, i know it's really easy and basic stuff, it won't help anyone but the power of gsap made me think that i'm a true badass ...  :mrgreen: )

See the Pen XJeZPR by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi Puluch,


Thanks for the demo. Really nice animation effect. I like it!


I'm not seeing any artifacts in FireFox. 

I consider artifacts to be visible elements left behind that do not belong.

What I am seeing in Chrome is a little bit of space or a border between the triangles before they open up. Is that what you are referring too?


Here is a screencast of Chrome and FireFox. Both look good to me, although FireFox does not show that 1px gap / border between the triangles.


Check this out




Do you see something different? What version of FF are you using? What OS?



Link to comment
Share on other sites

Thanks for your very fast answer! In your firefox version you're right there is nothing you can see. I tried on win 7 - 8 - 8.1 - 10 with FF 35.0.1 and below on several machines.


I see a thin line white then green on each edge of opening triangles : 123.jpg

it starts on the center of the square just before the triangle is rotating.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...