Menu
I'm experiencing an issue with the CSS transition property beeing fired on page load.
The problem is that when I apply a color transition to an element, (ex: transition: color .2s) then when the page first loads my elements flashes from black to it's own assigned color.
Supposing I have the following code:
p.green {
color: green;
transition: color .2s;
-moz-transition: color .2s;
-webkit-transition: color .2s;
-o-transition: color .2s;
}
p.green:hover {
color: yellow;
}
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/main.js"></script>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<p class="green">The Flashing Text</p>
</body>
</html>
On page load, my p.green will fade from black to green.
I don't want to apply the color transition to the :hover pseudo class as that would not apply the transition onMouseLeave.
I'ts really annoying having the text flashing across the webpage. Up to this moment I have been avoiding using transitions unless I really need them and even so I use with care. It would be great if there is some really obvious solution to this that I'm not seeing!
This happens on Google Chrome. I haven't tested in other browsers.
jsfiddle.net/ShyZp/2 (thanks @Shmiddty)
825
There is a bug in Chrome that causes CSS transitions to fire if the page includes a <form> element.
One simple fix is to add a script tag containing a single space to the footer of the page.
<script> </script>
You can follow the bug at https://crbug.com/332189 and https://crbug.com/167083.
92
@Shmiddty comments on this question left me thinking, so I have been playing around with the code and found a solution.
The problem lies on the header declarations. By inverting the order of the CSS and JS external file calls - i.e. putting the CSS before the JS - the color transitions stop firing on page load:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/main.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
My guess is that the JS load was delaying the load of the CSS to after the DOM was ready. By that time (as @Shmiddty suggested) the text had already been assigned the default browser color and was then using my CSS transition declaration to fade into its styled color.
** I'm still not sure this is the most appropriate way to do it, but it works. If anyone has a better solution please feel free to add or edit.
32
Add to your CSS:
.css-transitions-only-after-page-load * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
And add some code to your global JavaScript file:
$(document).ready(function () {
$(".css-transitions-only-after-page-load").each(function (index, element) {
setTimeout(function () { $(element).removeClass("css-transitions-only-after-page-load") }, 10);
});
});
Now you can mark any element on your page with css-transitions-only-after-page-load class:
<div class="container css-transitions-only-after-page-load">
...
</div>
nienn posts the solution. The problem lies in the document head, and where/how you are loading your stylesheets. It's similar to the "can't modify headers, they're already sent" in PHP, except HTML/CSS/webkit doesn't throw you an error.
I was experiencing this exact problem, read nienn's post, and I reviewed my head. Here were my contents previously.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<html lang="en">
<meta name="description" content="A website for me to do whatever I want with." >
<title>My title</title>
<link rel="stylesheet" type="text/css" href="/mD/media/foot.css">
<link rel="stylesheet" href="mD/media/head.css" type="text/css">
</head>
Notice I'm not loading any JS, also note of how I was loading the style sheets page after specifying the title. After moving the stylesheet-references to the 'back', it worked like a charm. The end result looked like this:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<html lang="en">
<meta name="description" content="A website for me to do whatever I want with." >
<link rel="stylesheet" type="text/css" href="/mD/media/foot.css">
<link rel="stylesheet" href="mD/media/head.css" type="text/css">
<title>My title</title>
</head>
It's not only javascript that can cause this problem, but the site title as well. I guess a good rule of thumb is css > js > site title.
7
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
