The css stylesheet applies with delay

Question

I use Bootstrap 5.0 beta1 and my own css file in a project and I wrote these selectors in my css for a custom login button (which is an <a> element by the way):

.login-button{
    text-decoration: none;
    background-color: red;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 6px;
    transition: 2s;
}

.login-button:hover{
    text-decoration: none;
    background-color: blue;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 6px;
}

But when I open the web page, weirdly the transition applies to the login link from no-style form to the original form it supposes to start with:

some other elements in my web page suffers from delay too. for example the navbar seems to have no style at all when I reload the page and after a fraction of a second the custom css styles I wrote in my custom css file (and bootstrap styles) applies to them.

PS: It works FINE when I apply the styles using internal css (<style> tag)!

I'm going to guess this is because of render blocking. What other scripts are on your site? The browser needs time to render the elements. For this specific `button` you can easily apply the `transition` to the `background-color` only, since that's the only thing you are changing on `hover`. There's little to do with the `navbar` until you have a caching mechanism in place. — disinfor, Jan 26 '21 at 20:58
@NathanielFlick why would OP remove the transition? Then the link wouldn't transition on hover. — disinfor, Jan 26 '21 at 21:03
@disinfor it have something to do with the rendering engine of Chrome cause it works fine on Firefox either way — asajadi84, Jan 26 '21 at 21:15
I bet if you do a hard refresh in Firefox a few times, you can probably get it to replicate what you're seeing in Chrome. You do have the fix as pointed out in brdtheo's answer and my other comment. The other stuff is certainly render blocking. — disinfor, Jan 26 '21 at 21:17
@NathanielFlick read the second part of the question about the `navbar` — disinfor, Jan 26 '21 at 21:22

score 1 · Answer 1 · answered Jan 26 '21 at 16:07

1

What if you try to specify the property in your transition: 2s;

e.g transition: backgound ease-in 2s;

answered Jan 26 '21 at 16:07

brdtheo

31
3

Welcome to Stack Overflow! This should have not gotten down voted, since it would have effectively fixed the main issue of the button on page load. That said, there's a bit more to this. – disinfor Jan 26 '21 at 21:05

Nathaniel Flick · Answer 2 · 2021-01-26T21:15:24.780

1

Your transition since it isn't specific affects all aspects of the control. If you want it to only apply to the background cover, and in this case, hover, then transition the background-color and set the easing:

.login-button{
    text-decoration: none;
    background-color: red;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 6px;
    transition: 2s ease-in-out background;
}

.login-button.no-transition{
    text-decoration: none;
    background-color: red;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 6px;
    transition: none;
}

.login-button:hover{
    text-decoration: none;
    background-color: blue;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 6px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" rel="stylesheet"/>


<button class="login-button">Login</button>

<button class="login-button no-transition">Login</button>

edited Jan 26 '21 at 21:15

answered Jan 26 '21 at 21:06

Nathaniel Flick

2,902
2
22
31

Again, why would they remove the `transition`? That's what they want. – disinfor Jan 26 '21 at 21:09
Fair enough @disinfor I've updated my answer. I mistakenly thought the goal was to remove the effect entirely. – Nathaniel Flick Jan 26 '21 at 21:17
If that's the case, then I would upvote brdtheo's answer, since it's essentially what you have and about 4 hours sooner. – disinfor Jan 26 '21 at 21:18
@disinfor Um, ok? – Nathaniel Flick Jan 26 '21 at 21:21
I say that because your answer is the exact thing that brdtheo's points out, e.g. apply the transition to the background only. Your answer obviously answers the question, but there was already an answer that did. That is all. – disinfor Jan 26 '21 at 21:24

score 0 · Answer 3 · answered Jan 26 '21 at 16:53

0

Try adding "preload" class in your body tag:

<body class="preload">

And add this in your CSS:

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

Then add this jQuery:

$(window).load(function() {
  $("body").removeClass("preload");
});

This solved my problem :) Reference -> here.

answered Jan 26 '21 at 16:53

Sabrina L.

62
4

Your solution may get around the problem, but it still doesn't "solve" it. – asajadi84 Jan 26 '21 at 17:04
This isn't needed and definitely hesitate to use !important as it usually is a sign of other issues that need to be address rather than being a proper fix for the global cascade. – Nathaniel Flick Jan 26 '21 at 21:19

The css stylesheet applies with delay

3 Answers3