11

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

Community
  • 1
  • 1
Daniël de Wit
  • 2,206
  • 1
  • 16
  • 13
  • What causes the 'transition' in the first place? I think we're missing some CSS. – Paulie_D Aug 20 '14 at 12:07
  • I left off the 'cause' of the transition for simplification of the example. We could add an extra rule: `div:hover { background-color: green; }`. Either way, in my browser it now transitions from white to red and when hovered to green. – Daniël de Wit Aug 20 '14 at 12:21
  • Can you demo the problem to us? – Paulie_D Aug 20 '14 at 12:26
  • @Paulie_D I've added a video demonstrating the bug: https://vimeo.com/103906083 and links to the actual bug reports for Chrome. Sadly they wont fix it. – Daniël de Wit Aug 20 '14 at 14:10

4 Answers4

8

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

<script> </script>
spencer.sm
  • 19,173
  • 10
  • 77
  • 88
4

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.

Community
  • 1
  • 1
Boyan Kostov
  • 41
  • 5
  • 1
    This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). – mustaccio Aug 25 '14 at 15:26
  • Sorry, I wanted to provide directions to questions which discuss the same issue, but my profile doesn't have enough reputation to allow me to comment on the author's post. – Boyan Kostov Aug 25 '14 at 15:36
  • Tried improving the answer, hope it's better now. – Boyan Kostov Aug 25 '14 at 15:46
  • 1
    @BoyanKostov Thank you for sharing your ideas. Personally I don't like needing javascript to make it function properly. But then again it's the only option we have right now. Maybe if we all 'star' this issue [link](https://code.google.com/p/chromium/issues/detail?id=332189) they will actually try and fix it. – Daniël de Wit Aug 26 '14 at 11:41
  • @DanieldeWit Thank you too. I agree 100%. Starred the issue and I hope to see the bug fixed soon. – Boyan Kostov Aug 26 '14 at 11:43
1

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

Tofandel
  • 3,006
  • 1
  • 29
  • 48
1

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.

  1. 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.
  2. Place the offending element(s) in a flexbox container. This fixes the bug as well.
DR01D
  • 1,325
  • 15
  • 32