1

SOLVED Chrome bug, Stop CSS3 transition from firing on page load This might be a duplicate.

I'm getting something weird with the following code:

JsFiddle: https://jsfiddle.net/xz3hcbqv/ You can see it working fine here and if I export it to my own HTML file like so:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style>
            .stripes {
    cursor: pointer;
    width: 35px;
}

.stripe {
    width: 35px;
    height: 5px;
    margin: 6px 0;
    transition: background-color 10s;
    background-color: black;
}

label {
    background-color: black;
}

input {
    display: none;
    background-color: black;
}

input:checked + .navbar-toggle .stripe {
    background-color: red;
}

input:checked + .navbar-toggle .stripe.first {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

input:checked + .navbar-toggle .stripe.second {
    opacity: 0;
}

input:checked + .navbar-toggle .stripe.third {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}
        </style>
        <link rel="stylesheet" href="style2.css">
    </head>
    <body>
                <nav class="navbar">
            <input type="checkbox" id="navbar-toggle-cbox">
            <label for="navbar-toggle-cbox" class="navbar-toggle collapsed">
                <div class="stripes">
                    <div class="stripe first"></div>
                    <div class="stripe second"></div>
                    <div class="stripe third"></div>
                </div>
            </label>
        </nav>

    </body>
</html>

Still working fine, notice that it's the exact same code. But then, when I copy the inner of <style> </style> and put it into a style2.css file. On the browser load, it fades the black color as well.

What causes this? How can I solve this?

Community
  • 1
  • 1
MrDikke
  • 121
  • 13
  • 1
    For this we need to see the exact (extra css) code that you are using on your side. – Saurav Rastogi Dec 14 '16 at 16:30
  • You've got everything. The style2.css file is empty. Try it out for yourself. – MrDikke Dec 14 '16 at 16:30
  • just tried, and it's identical to the fiddle. You need to put your code up on a server where we can see the problem happening exactly as you see it. – andi Dec 14 '16 at 16:34
  • @andi just created a complete separate folder and copy pasted the code there, it did the exact same thing. – MrDikke Dec 14 '16 at 16:39
  • Possible duplicate of [Stop CSS3 transition from firing on page load](http://stackoverflow.com/questions/14389566/stop-css3-transition-from-firing-on-page-load) – Marcos Pérez Gude Dec 14 '16 at 16:45

2 Answers2

2

I pulled the code out of the style section and placed it into a local style2.css file and put the rest of the code into an index.html file and was able to reproduce the effect you're describing, but only in Chrome (and in Chrome it doesn't produce the effect in jsfiddle). The rule that is likely causing the fade is the transition on the .stripe rule, though. It sounds like the issue you are describing is caused by a bug in Chrome. See this question for more information: Stop CSS3 transition from firing on page load

Community
  • 1
  • 1
jennyfofenny
  • 4,359
  • 2
  • 17
  • 15
0

Different solution: since it's a bug in Chrome afaik, you can set the transition 1s to the input:checked.

When the browser get's loaded, the input isn't checked yet. This way you won't have to use JS or something else fancy.

EDIT: Adding -webkit-transition also seems to work.

MrDikke
  • 121
  • 13