1

I have one strange bug on my website. When i trying to transform block with text by using

transform: translateY(0px) translate3d(0,0,0) translateZ(0);

i got this block but with black (or white) stripes behind the text. I suppose in depends what background is - light or dark. I can't attach the screenshot for example, so i leave a link. Animated blocks - text block that appeared when you scroll the page. This animation perfectly work in all browsers, but not in Firefox (windows ver.). Maybe someone saw this and could help... Thanks!

Suhomozgy Andrey
  • 61
  • 4

2 Answers2

5

I solved my problem by setting 

outline: 1px solid transparent;

property for each animated block on the page. It was helpful. I found this solution in this answer.

Community
  • 1
  • 1
Suhomozgy Andrey
  • 61
  • 4
0

This might be a result of a bug that I have encountered. There are still quite a few of optimization problems when it comes to transitions, in any browser, but particularly Firefox.

Have you tried setting perspective: 1000; to the parent element? It's served as a quick fix to some of these problems.

Nice website, by the way!

seanlevan
  • 1,367
  • 3
  • 15
  • 33
  • thanks for solution example. But i did not tried it. I solved this problem by setting `outline: 1px solid transparent;` property for the animated block... – Suhomozgy Andrey Jan 12 '15 at 10:56