CSS3 transition error in Chrome
I have a simple modal that opens: checked input. In Firefox and IE, the transition animation works fine, but in Chrome it is buggy (the effect is not smooth) when it appears when validating input.
Demo Script: JsFiddle
When I delete visibility: hidden
it works fine, but then the modals block the rest of the page below it - no text can be selected, no buttons are pressed, etc.
Any ideas on how to make the transition smooth in Chrome?
source to share
Answer
You have declared transform: none;
in your modal div
. Just define rotX instead so that your animation has a start and end point. This solves the animation problem:
input#switch:checked ~ #test > div {
transform: rotateX(0deg);
}
http://jsfiddle.net/s8hts3v7/9/
Snippet of code
#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>
source to share
As explained here , we cannot use visibility
for animation. So, instead, I used opacity
passing as the rgba
value for the 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>
source to share
Please check the fiddle : jsfiddle.net
Just added:
opacity: 0.01;
z-index: -1;
to #test and changing z-index + opacity when displaying the overlay:
opacity: 0.99;
z-index: 9999999;
source to share