Chrome transition fires on page load when form element added

问题

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

回答1:

The simplest fix is to add a script tag to the page footer with a single space.

<script> </script>

回答2:

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.

回答3:

I encountered the same problem and finally decided that the only acceptable solution was to redefine in the style tag the color of the div like this :

<style>
    div {
        background-color: red;
    }
</style>

So the html code is not too dirty and it's a small fix, even though that would be great if they could resolve this bug

回答4:

The best way to solve this problem is to use the single space, empty <script> fix found in the answer by spencer.sm. However I've found 2 other ways to solve this problem.

Place the CSS of the offending element(s) inside a <style> tag in the header of your HTML file. The bug only occurs when the CSS is called from an external stylesheet.
Place the offending element(s) in a flexbox container. This fixes the bug as well.

来源：https://stackoverflow.com/questions/25404206/chrome-transition-fires-on-page-load-when-form-element-added

标签

html

css

forms

google-chrome

css-transitions