Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

v5 alpha .nav-link transition and flashing borders

See original GitHub issue

In v5alpha I noticed a flashing of the tab borders on loading the page and I think it’s related to the added transitions: https://github.com/twbs/bootstrap/pull/29988

I added a testcase, but also let me add a gif[1] and a video: bootstrap5

Full video: https://imgur.com/a/LR0e1zT

I reload the page, the tabs are being rendered with all blue borders and then the transparent border is being applied, with a transition (I throttled the connection/CPU in Dev Tools).

I can reproduce it by toggling the border and when I remove the transition from .nav-link there is no flashing anymore.

The gif and the video was made in a Chrome browser that’s filled to the brim with extensions! I tested the same on a clean Chrome browser and the effect was much less visible and I couldn’t capture it with the screenrecorder, but it’s there!

Chrome 83 Windows
Testcase https://codepen.io/localhorst/pen/GRoWYRW

[1]: it looks like github remove the animation or just plays it once?!.

Issue Analytics

State:
Created 3 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

2reactions

marcus-at-localhostcommented, Dec 26, 2020

I was investigating this more, because it was bothering me.

TL;DR this only occurs if there is no script tag in the page.

Here is how you can hopefully reproduce the bug:

Use Chrome Windows (I experienced it in Firefox Windows as well)
Fork this Codepen: https://codepen.io/localhorst/pen/poEdwvK
Change view to “Debug mode” so no codepen scripts are inserted
Open Devtools and check Disable Cache in Network tab
Load/Reload and the transition is flashing (not always but most of the time).

The reason why it was not working in codepen’s Editor View in @XhmikosR example was a) because Codepen injects extra script tags and b) @XhmikosR included the bootstrap JS

So it is only flashing if there are no <script> tag on the page and the css is external. Inlining bootstrap would fix it.

This should show the flashing:

<!DOCTYPE html>
<html lang="en" >
<head>

  <meta charset="UTF-8">
  <title>CodePen - Bootstrap 5 flashing Tabs</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css'>
</head>
<body translate="no" >
  <nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a href="#tab-start" data-bs-toggle="tab" role="tab" class="nav-link active">Start</a>
    <a href="#tab-console" data-bs-toggle="tab" role="tab" class="nav-link">php console</a>
    <a href="#tab-wiki" data-bs-toggle="tab" role="tab" class="nav-link">Wiki</a>
    <a href="#tab-wakatime" data-bs-toggle="tab" role="tab" class="nav-link">Wakatime</a>
    <a href="#tab-gistnote" data-bs-toggle="tab" role="tab" class="nav-link">Gistnote</a>
    <a href="#tab-startpage" data-bs-toggle="tab" role="tab" class="nav-link">OSCINT Startpage</a>
  </div>
</nav>
</body>
</html>

The fix is to put an “almost empty” <script> tag before </head> like this:

<head>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css'>
  <script>//</script>
</head>

There are instances where a script tag in the body fixed it for people, there is a bug report for chrome related to input fields and transitions on load. In this particular case it only worked with empty script in the header.

This https://stackoverflow.com/a/42969608/814031 helped me fixing it.

I know this is nothing Bootstrap specific, but I thought it’s maybe good to have it document here.

1reaction

seb-wittcommented, Aug 12, 2020

Same issue observed, additionally this seems to happen on input borders as well Attached is behavour on the tabs as well, although styled, its still done with source sass from a few days ago

3f915112-59d8-4e43-8459-19012a5d7c4c