Opacity change during transition flickers in Safari

Question

I have a composite div (it has translate3d) with the transition opacity:

#bad {
    background-color: red;
    -webkit-transition: opacity .5s linear;
    -webkit-transform: translate3d(0, 0, 0);
}

If I changed it opacitywhen the transition goes through, it will flicker in Safari.
Flicker occurs approximately every three seconds and is akin to a white flash.

There is no such problem in Chrome.

Scroll up and down in this script to see what I mean.

The problem, apparently, is not limited to a change in transparency -webkit-transform, while its transition passes, it has a similar effect: once in a while the element is displayed in one of the final transition states.

The problem disappears if I delete -webkit-transform, but, unfortunately, this is not an option right now.
Can I fix this in Safari in other ways?

Answer 1

The problem is changing property values ​​while adding animations.

, OSX 10.5, , Core Animation ++. , . , Core Animation kCAFillModeBackwards. , CSS, WebKit . WebKit, . , Core Animation, WebKit. , CFTimeInterval, CACurrentMediaTime CATransaction.

, CSS . , , . , , , . , 0 1 1 0, , , 0,577564? @keyframes, .

-. , CSS. , , CSS-, , . element.style CSS.

, , WebKit Core Animation. - .

:

-webkit-transform: translate3d(100px, 100px, 0);

:

-webkit-transform: translate(100px, 100px);

http://jsfiddle.net/z6ejt/9/

Answer 2

CoreAnimation.
, .

, , Core Animation rdar://problem/12081774 a.k.a. .

[...]

, Safari , . Core Animation fillMode kCAFillModeBackwards kCAFillModeBoth. , - , , , . , , .

# 115278 WebKit , , , .

, ( ), .

Answer 3

3 , :

, jQuery, OSX Safari.

:

1) CSS , , , , .

img {
/*DON'T COPY !!!*/
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
/*DON'T COPY !!!*/
}

.

2) CSS , :

display: none;/*initial state modified by the fadeIn function*/
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-font-smoothing: antialiased;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(0); 

3) jQuery "fadeIn" ".animate({opacity: 1} ecc..".

OSX Safari.