Masking not working properly on Firefox and Safari

[Bruno Frank]

Hello guys!

I'm trying to make a rounded mask with a scrolling image inside it. It's a DIV with border-radius: 300px (becoming a circle) and overflow HIDDEN that has another DIV inside with a pattern that moves from one point to another. If you see it on Chrome, works properly, but on Firefox and Opera the first DIV goes square during the movement.

Check this out at: http://brunofrank.net/banners/maskTest/

Do you guys have any clue to solve this problems?

Thanks in advance!

 

[Bruno Frank]

I've just change something and started working on Firefox, but not Safari.

This is the DIV that have the background (the div inside the rounded one):

was

#tarja-az {
      transform-style: preserve-3d;
      transform: translate3d(0px, 0px, 0px);
      background-image: url("assets/pat-az.gif");
    }

changed to

#tarja-az {
      background-image: url("assets/pat-az.gif");
    }

Need to figure out the problem with Safari