CODEWITHSUNDEEP
cssoperacss-transitions
kizu
kizu

Reputation: 43224

Is there a CSS workaround for Opera's bug with visibility transition?

Here is a fiddle for start: http://jsfiddle.net/kizu/A7QX9/

The problem: in Opera when you animate the transition for visibility property (usually along with the opacity) it's not animated properly: the visibility is changed always at the end of transition, so when the block is appearing it's not appearing smoothly.

So, the question: is there any CSS-only workaround for this Opera's bug?

Upvotes: 3

Views: 1241

Answers (2)

rchl
rchl

Reputation: 146

Current implementation of transitions in Opera is based on an older version of the spec saying that for transitioning visibility "1 is "visible" and all other values are "hidden"."

So if you try transitioning from "hidden" to "visible" then you won't see the element until underlying 0-1 range representing transition reaches value 1. At the same time, if you are transitioning from "visible" to "hidden" then element will disappear as soon as transition has started as value will be <1.

The behavior that you expect is specified in the "draft" version of the spec which says that "0 is "hidden" and all other values are "visible".".

Good news though - Opera 12 will include fix for this bug. Expect to see testing build with a fix on Desktop Team blog soon.

Upvotes: 3

kizu
kizu

Reputation: 43224

After I formulated the question and thought for a while, I've found the answer myself.

And came up with a solution.

So, going step-by-step:

  1. Let's look at the case when you need to show the block which is hidden at the start.
  2. When you toggle the opacity and visibility with a transition, the block stays with visibility: hidden while the transition is in the run. So, you don't need to use transition for visibility here.
  3. But when you hide the block again, you need to toggle the visibility at the end of the transition, so you need the transition here apparently.
  4. So, at the selector where the block is hidden you must have the transition for the opacity and in the selector where it's shown, you don't need the transition.

Here is a fiddle I've made with this solution: http://jsfiddle.net/kizu/A7QX9/1/

Upvotes: 4

Related Questions