Bootstrap: Transition issue at loading with chrome
Hi, just spotted a bug with bootstrap 4 alpha 6 and chrome only. The bug does not happen on both of firefox and IE. I actually tested on chromium (v55) for linux and chrome for windows (v55).
What is the bug?
When loading a page that contains both of a button and an input, and that does not contain javascript, the button will appear with a transition (size, backgroun color and color have a transition from initial state to the bootstrap style).
I didn't test it much, I might be wrong on the exact conditions for the bug to happen
I could not provide a fiddle because fiddlejs injects some codes that break the conditions.
Here are 3 sample to reproduce and fixe the bug:
Case 1: button alone [WONT have the issue]
html
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary" role="button" type="submit">Connexion</button>
</body>
</html>
Case 2: we added an input on the page [WILL have the issue]
html
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary" role="button" type="submit">Connexion</button>
<input type="text">
</body>
</html>
Case 3: we added a script on the page [NO MORE issue]
html
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary" role="button" type="submit">Connexion</button>
<input type="text">
<script>
var foo = "foo";
</script>
</body>
</html>
Please note that no matter the order of the elments the bug will happen: the script might be at the beggining of the document or at the end, the button might be before the input or after or in parent elements, etc...
As I said that might be a bug with chrome itself that would show the DOM before it loads the CSS, I also opened an issue on the chromium side
gsouf
All 12 comments
This is confirmed as a bug in chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=693088
gsouf
on 30 Mar 2017
I reopen the issue because we have to add this issue to the browser bug page
Johann-S
on 30 Mar 2017
Ok, but note that the condition to reproduce the bug are very special and this bug should be extremly rare!
gsouf
on 30 Mar 2017
I can confirm adding an empty script tag solves this issue for me
danawoodman
on 7 May 2017
Ok, this is even weirder... If an input has a value, the issue shows up. If the input is empty it does not. Bizarre...
danawoodman
on 7 May 2017
@danawoodman as I said the bug is confirmed on chrome side
gsouf
on 7 May 2017
Looks like they're waiting for a reply from the submitter. Also, my point about input field contents seems relevant to the issue
danawoodman
on 7 May 2017
What's the status on this one? Still need to add a bug to our docs?
mdo
on 2 Jul 2017
@mdo
That's not fixed on chrome's side for the moment
gsouf
on 2 Jul 2017
patrickhlauke
on 2 Jul 2017
Currently, Chrome on Windows 10 is at Version 79.0.3945.117. The previously detailed chromium bug reported id=709718 has been closed out as of 4th December 2019 as deemed working. Is this now resolved and if so, close of issue here?
stealth-swift
on 12 Jan 2020
Closing this per @stealth-swift's comment
MartijnCuppens
on 14 Jan 2020
Related issues
ziyi2
路
3Comments
bellwood
路
3Comments
devdelimited
路
3Comments
kamov
路
3Comments
eddywashere
路
3Comments
Most helpful comment
I can confirm adding an empty script tag solves this issue for me