Styles should not be inserted into HEAD in Safari

• Operating System: OSX
• Node Version: does not matter
• NPM Version: does not matter
• webpack Version: does not matter
• mini-css-extract-plugin Version: does not matter

Expected Behavior

Expected that application behaviour would be the same across different browsers.

Actual Behavior

In Safari the whole rendering would be suspended while style, added to the head, is loading. Adding style to the body resolves the problem.

Code

This example reproduces an issue originally created for loadable-components.

It delays serving for .css file for 10 second, and all this time nothing is rendered.

How Do We Reproduce?

1. add link to the head in Safary
2. render some animation (like counter) in on the page
3. page is expected to be fronzen all time link is loading the data

How to fix?

For Safari “dynamic” styles has to be added into Body. It resolves the issue.

• ongoing PR https://github.com/webpack-contrib/mini-css-extract-plugin/pull/459 should fix the problem, however it should be considered as a default behavior.
• I would say that’s a WebKit bug, but could not find something at their bug tracker
• see this PR for a bit more context

[ogonkov]

inserting styles to <header> is a common practice, it is definitely shouldn’t be changed

[theKashey]

1. Yes. That’s a purely webkit bug
2. Also yes… it would take some time to resolve it, as well to release a new version, and ship an update.

I would say - it might take a year to resolve this issue via webkit, so some other solution should be created.