CSS3 transition glitch in Chrome

Question

I have a simple modal, which opens up upon :checked input. In Firefox and IE the transition animation works fine, but in Chrome it glitches (effect not smooth) when it shows up upon checking the input.

Demo fiddle: JsFiddle

When i remove visibility: hidden it works fine, but then the modal blocks the rest of the page under neath it - no text can be selected, no buttons clicked etc.

Any ideas on how to make the transition smooth in Chrome?

where are you applying `visibility: none`? do you mean `visibility: hidden`? — Mr_Green, Jul 27 '15 at 13:52
@Grumpy Strange, i have exact setup localy and initial transition upon opening the modal has this glitch in Chrome. — g5wx, Jul 27 '15 at 14:11
what do you mean with glitch? That the transition isn't smooth, with a short stop in between the animation or something else? — MMachinegun, Jul 27 '15 at 14:16
@marczking I think he meant the same. I can see the same stop effect here. — Mr_Green, Jul 27 '15 at 14:20

MMachinegun · Accepted Answer · 2015-07-27T15:20:07.717

Answer

You declared transform: none; on your modal div. Just define a rotationX instead, so your animation has a starting and ending point. That solves the animation issue:

input#switch:checked ~ #test > div {
    transform: rotateX(0deg);
}

http://jsfiddle.net/s8hts3v7/9/

Code Snippet

#test {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 9999999;
  visibility: hidden;
}
input#switch:checked ~ #test {
  visibility: visible;
}
#test > div {
  background: #fff;
  width: 300px;
  height: 100px;
  padding: 30px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transform: perspective(300px) rotateX(-90deg);
  transform-origin: top center;
  transition: 0.4s ease;
}
input#switch:checked ~ #test > div {
  transform: rotateX(0deg);
}
#test > div label {
  background: #000;
  color: #fff;
  display: block;
  text-align: center;
  padding: 8px;
  margin-top: 20px;
  cursor: pointer;
}

<input id="switch" type="checkbox" name="test-chkbox" />
<label for="switch">Open modal</label>

<div id="test">
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    <label for="switch">Close modal</label>
    </div>
</div>

score 1 · Answer 2 · edited May 23 '17 at 11:45

As explained here, we can't use visibility to animate. So, instead I used opacity passing as rgba value to background.

    #test {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        z-index: -1;
    }
    input#switch:checked ~ #test {
        background: rgba(0, 0, 0, 0.8);
        z-index: 9999999;
    }
    #test > div {
        background: #fff;
        width: 300px;
        height: 100px;
        padding: 30px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        transform: perspective(300px) rotateX(-90deg);
        transform-origin: top center;
        transition: 0.4s ease;
    }
    input#switch:checked ~ #test > div {
        transform: none;
    }
    #test > div label {
        background: #000;
        color: #fff;
        display: block;
        text-align: center;
        padding: 8px;
        margin-top: 20px;
        cursor: pointer;
    }

<input id="switch" type="checkbox" name="test-chkbox" />
<label for="switch">Open modal</label>
<div id="test">
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        <label for="switch">Close modal</label>
    </div>
</div>

I also tried your approach, but the problem with your answer is, although you solve the animation issue, you get a `click` issue. If you open the modal and want to `close` it, you sometimes have to click **twice**. Sometimes the first click doesn't trigger the closing — MMachinegun, Jul 27 '15 at 15:06
Thx Mr_Green, i know i cant animate visibility, i was looking for a workaround for the current setup. — g5wx, Jul 27 '15 at 15:54

score 0 · Answer 3 · edited Jul 27 '15 at 15:15

0

Please check fiddle: jsfiddle.net

Just added:

opacity: 0.01;
z-index: -1;

to #test, and changing z-index + opacity when overlay showing:

opacity: 0.99;
z-index: 9999999;

edited Jul 27 '15 at 15:15

Tejus Prasad

6,322
7
47
75

answered Jul 27 '15 at 13:46

Yoshi

104
1
4

1

thx for your input but the transition upon closing the modal doesnt work now. – g5wx Jul 27 '15 at 14:13

CSS3 transition glitch in Chrome

3 Answers3

Answer

Code Snippet