All geek questions in one place

Chrome transitions to page loading when adding a form element

There seems to be a bug with Google Chrome version 36.0.1985.143, or I'm missing something here. Firefox and Safari seem to work as expected.

Checkout Demo video at Vimeo

Css transitions seem to work when loading a document when a form element is present in the following html document:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <div></div> <form></form> </body> </html>

And a simple css file: style.css

 div { -webkit-transition:background-color 2s; -moz-transition:background-color 2s; -o-transition:background-color 2s; transition:background-color 2s; width: 188px; height: 188px; background-color: red; margin: 0 auto; } div:hover { background-color: green; }

The transition stops firing when the <form></form> element is deleted or when the rules of the style sheet are placed inside the main section of the document as follows:

 <style> div { -webkit-transition:background-color 2s; -moz-transition:background-color 2s; -o-transition:background-color 2s; transition:background-color 2s; width: 188px; height: 188px; background-color: red; } </style>

Is this a real mistake, or am I doing something wrong?

PS: I do not have activated extensions, and this behavior also appears in incognito mode. In addition, these problems indicate whether the document is open in a browser through a folder or served from the actual apache web server.

When I recreate the “error” on a similar question: The CSS transition defined in the external stylesheet causes the transition to load the page , it seems to be fixed. So far I have not changed the property of switching to the background color and, of course, have not added the <form></form> element ..

UPDATE: This seems to be a real bug in Chrome. Reported here and here . Although they will not fix it soon. Does anyone know a simple (css) hack / fix for this?

UPDATE2: Another demo

+6
source share
4 answers

I struggled with the same problem all day. I found what was discussed here and, as one of the commentators said, here . The second helped me a lot.

A workaround is to add the .preload class to the body

 <body class="preload">

which disables all transitions

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

and then delete it using JS (jQuery) to restore the transitions:

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

Unfortunately, I could not find a CSS-only solution when using an external CSS file.

+3
source

The simplest solution is to add a script tag to the page footer with a single space.

 <script> </script>
+2
source

I ran into the same problem and finally decided that the only acceptable solution was to override the div color in the style tag as:

 <style> div { background-color: red; } </style>

So the html code is not too dirty and this is a small fix, although it would be great if they could solve this error

+1
source

The best way to solve this problem is to use one space, an empty <script> patch found in spencer.sm's answer. However, I found 2 other ways to solve this problem.

  • Put the CSS of the offending element (s) inside the <style> in the header of your HTML file. The error only occurs when CSS is called from an external stylesheet.
  • Place the offending element in the flexbox container. This also fixes the error.
+1
source

Source: https://habr.com/ru/post/974092/

More articles:


All Articles