Menu
There seems to be a bug with Google Chrome version 36.0.1985.143 or am I missing something here. Firefox and Safari seem to work as expected.
Checkout a Demonstration video on Vimeo
Css transitions seem to fire on document load when a form element is present in the following html document:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div></div>
<form></form>
</body>
</html>
And a simple css file: style.css
div {
-webkit-transition:background-color 2s;
-moz-transition:background-color 2s;
-o-transition:background-color 2s;
transition:background-color 2s;
width: 188px;
height: 188px;
background-color: red;
margin: 0 auto;
}
div:hover {
background-color: green;
}
The transition stops firing when the <form></form> element is removed or when the stylesheet rules are placed inline within the head section of the document like so:
<style>
div {
-webkit-transition:background-color 2s;
-moz-transition:background-color 2s;
-o-transition:background-color 2s;
transition:background-color 2s;
width: 188px;
height: 188px;
background-color: red;
}
</style>
Is this an actual bug, or am I doing something wrong?
P.S: I have no extensions enabled and this behaviour also shows in incognito mode. Also, this problems shows whether or not the document is simply opened in the browser via a folder or served from an actual apache webserver.
When I recreate the 'bug' from a similar question: CSS transition defined in external stylesheet causes transition on page load it seems to be fixed. Untill I changed the transition property to background-color and ofcourse adding the <form></form> element..
UPDATE: Seems it's an actual bug in Chrome. Reported here and here. Although they will not fix it any time soon. Anyone know a simple (css) hack/fix for this?
UPDATE2: Another Demo
281
The simplest fix is to add a script tag to the page footer with a single space.
<script> </script>
I was struggling with the same issue the whole day. I've found it was also discussed here and as one of the commenters said - here. The second one helped me a lot.
The workaround mentioned is to add a .preload class to the body
<body class="preload">
which disables all transitions
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
and then remove it with JS (jQuery) to restore the transitions:
$("window").load(function() {
$("body").removeClass("preload");
});
Unfortunately I couldn't find a CSS only solution when using external CSS file.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
