CODEWITHSUNDEEP
htmlcsstwitter-bootstraptransition
lilasquared
lilasquared

Reputation: 138

CSS 3 Transitions - Flickering Content with Bootstrap 3.2

I am experiencing a strange flickering effect when attempting to use bootstrap 3.2 and css3 transitions to simulate a horizontal flipping effect. The flipping happens but the content on the back side of the "Card" flickers rapidly during the transition. I have included a JSFiddle of the problem. This is happening in chrome. In IE the back side of the card is not displayed at all after the transition.

I am using backface-visibility: hidden as seen in this code snippet

.flippable > figure {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: all ease-in-out 0.5s;
}

https://jsfiddle.net/w953nvpq/

Thanks in advance for any help on this.

Upvotes: 1

Views: 404

Answers (1)

vals
vals

Reputation: 64174

The backface-visibility : hidden doesn't work because it needs transform-style: preserve-3d in the element itself, not in the parent

.flippable > figure {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: all ease-in-out 0.5s;
    transform-style: preserve-3d;
}

and now this is useless:

.flippable.flipped .front {
    visibility: hidden;
}

fiddle

Upvotes: 1

Related Questions