2

My problem is a behavior that is happening only in Chrome (Not in mozilla) and it happens when I link the css, so if I use a style tag I got what I expected.

The problem is when I use a transition in a linked stylesheet, the element, when loaded, fade from white or black to the defined color.. Which is really weird as you can see below :

The glitch

And what I expect :

Expected

Here is a simple code to demonstrate my problem :

index.html :

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <aside>
        <form>
            <input type="text" name="pseudo" id="reg-pseudo" class="text-left"/><br/>
            <input type="checkbox" name="rememberme" id="rememberme" class="hidden"/>
            <label for="rememberme" class="checkbox float-left"></label>
        </form>
    </aside>
</body>

style.css :

aside input:focus {
    border-color: #5FAACF;
}
aside input, aside .checkbox {
    border-color: #a18bb9;
    color: #333;
    font-weight: bolder;
    background-color: white;
    border-width: 4px;
    border-style: solid;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.5s ease-in-out;
}
aside .checkbox {
    width: 14px;
    height: 14px;
    margin: 2px 4px;
    display: inline-block;
}
aside input[type=checkbox]:checked + .checkbox {
    border-color: #cf5f9b;
}
aside input[type=checkbox]:checked + .checkbox:before {
    content: "✔";
    top: -4px;
    position: relative;
    display: inline;
}
.hidden {
    visibility: none;
    width: 0;
}

And here is a working fiddle of what I would like (because as I explained the css is not linked but in a style tag)

This wasn't happening before, so I would like to know if there is a way to solve this whitout using the style tag and whitout using delays, if I'm doing something wrong here or if it's just a passenger chrome bug ? Thanks

I found a similar issue here but I'm not satisified with the answers

Community
  • 1
  • 1
Tofandel
  • 3,006
  • 1
  • 29
  • 48
  • It shouldn't matter how you include the CSS unless your linked file is being overridden by a higher-priority declaration. You should be able to inspect the elements in your browser console to see what's doing the unexpected styling. – isherwood Dec 15 '14 at 14:23
  • I'm still searching and apparently it's a known chrome bug.. But it won't be fixed soon – Tofandel Dec 15 '14 at 14:27
  • The fix would be to put the color of the element in a style tag.. But I find that a little bit dirty – Tofandel Dec 15 '14 at 14:28

1 Answers1

0

Have you tried using !important to override any browser styling or bugs? Something like this:

aside input, aside .checkbox {
    border-color: #a18bb9 !important;
}
legolicious
  • 11
  • 5