Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Transition issue at loading with chrome #22014

Closed
gsouf opened this issue Feb 16, 2017 · 12 comments
Closed

Transition issue at loading with chrome #22014

gsouf opened this issue Feb 16, 2017 · 12 comments
Labels
browser-bug js v4

Comments

@gsouf
Copy link

gsouf commented Feb 16, 2017

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]

<!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]

<!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]

<!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
Copy link
Author

gsouf commented Mar 30, 2017

This is confirmed as a bug in chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=693088

@gsouf gsouf closed this as completed Mar 30, 2017
@Johann-S
Copy link
Member

I reopen the issue because we have to add this issue to the browser bug page

@Johann-S Johann-S reopened this Mar 30, 2017
@gsouf
Copy link
Author

gsouf commented Mar 30, 2017

Ok, but note that the condition to reproduce the bug are very special and this bug should be extremly rare!

@danawoodman
Copy link

I can confirm adding an empty script tag solves this issue for me

@danawoodman
Copy link

Ok, this is even weirder... If an input has a value, the issue shows up. If the input is empty it does not. Bizarre...

@gsouf
Copy link
Author

gsouf commented May 7, 2017

@danawoodman as I said the bug is confirmed on chrome side

@danawoodman
Copy link

Looks like they're waiting for a reply from the submitter. Also, my point about input field contents seems relevant to the issue

@mdo
Copy link
Member

mdo commented Jul 2, 2017

What's the status on this one? Still need to add a bug to our docs?

@gsouf
Copy link
Author

gsouf commented Jul 2, 2017

@mdo
That's not fixed on chrome's side for the moment

@patrickhlauke
Copy link
Member

https://bugs.chromium.org/p/chromium/issues/detail?id=709718

@stealth-swift
Copy link

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?

@MartijnCuppens
Copy link
Member

Closing this per @stealth-swift's comment

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
browser-bug js v4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@mdo @danawoodman @patrickhlauke @bardiharborow @Johann-S @gsouf @MartijnCuppens @stealth-swift