What's adding <style type="text/css">body { display: none !important }</style>

Asked 29/2, 2016 at 14:39 Answered 10/10, 2018 at 20:7

yeoman yeoman-generator yeoman-generator-angular

I followed these instructions for my app:

https://github.com/yeoman/generator-angular#readme

My Index (before build)

 <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
  <!-- build:css(.) styles/vendor.css -->
  <!-- bower:css -->
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
  <!-- endbower -->
  <!-- endbuild -->
  <!-- build:css(.tmp) styles/app.css -->
  <link href="app.less" type="text/css" rel="stylesheet/less">
  <!-- endbuild -->

My dist Index (in text-editor)

<html ng-app="myApp"> <head> <meta charset="utf-8"> <title>Datavalidering</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel="stylesheet" href="styles/vendor.2ac5f564.css"> <link rel="stylesheet" href="styles/app.d41d8cd9.css"> </head> <body>

Dist index (browser)

<head>
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
 <meta charset="utf-8">
 <title></title> 
<meta name="description" content=""> 
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 <link rel="stylesheet" href="styles/vendor.2ac5f564.css"> <link rel="stylesheet" href="styles/app.d41d8cd9.css"> 
<style type="text/css">body { display: none !important }</style></head>
<body>

The problem may be in gruntfile.js

http://plnkr.co/edit/r2hdhWY7olIw0pBHJ4VF?p=preview

Thank you in advance for your answers!

Hague answered 29/2, 2016 at 14:39 Comment(0)

This happens because of (less.js):

// Simulate synchronous stylesheet loading by blocking page rendering
if (!options.async)
{
    css = 'body { display: none !important }';
    head = document.head || document.getElementsByTagName('head')[0];
    style = document.createElement('style');

    style.type = 'text/css';
    if (style.styleSheet) {
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }

    head.appendChild(style);
}

so, all you need to do is add this before less.js

<script>
less = {
    async: true
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>

Ostracism answered 7/3, 2016 at 21:11 Comment(4)

Thansk! So even if I got

<!-- build:js(.) scripts/vendor.js -->      <!-- bower:js -->  <script src="bower_components/less/dist/less.js"></script>

I still need <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script> How so? – Hague 15/3, 2016 at 15:56

No, you dont need it, that was just an example to show that less.js include MUST come after configuration – Ostracism 16/3, 2016 at 8:44

This is a terrible issue. Who in their right mind would add display none important to body??? – Bice 29/4, 2016 at 20:55

its to "Simulate synchronous stylesheet loading" github.com/less/less.js/blob/… – Ostracism 30/4, 2016 at 16:24

I'm not using Angular, but had a similar problem where this <style type="text/css">body { display: none !important }</style> suddenly appears at the end of head tag, effectively renders the whole page to not displaying anything.

I found out that the culprit was less.js. Simply commenting the line fixes it.

Tailback answered 4/3, 2016 at 1:57 Comment(2)

So you comment: <script src="bower_components/less/dist/less.js"></script> out? If I do that I wont be able to use Less.. Thanks! – Hague 7/3, 2016 at 12:25

well, at least that should give you an idea where to start looking. In my case, it turns out that I didn't need Less so it was an easy solution to take. – Tailback 8/3, 2016 at 3:11

I have found a solution and the culprit.

It comes from the "Jetpack".

This image shows the location of the code in WordPress Directory:

Rede answered 10/10, 2018 at 20:7 Comment(0)

Recommended topics

Hot tags