# Looks like doc.ready fires before CSS has been applied, how can I avoid it?

**URL:** https://discourse.roots.io/t/looks-like-doc-ready-fires-before-css-has-been-applied-how-can-i-avoid-it/14382
**Category:** sage
**Tags:** sage9
**Created:** 2018-12-18T12:02:27Z
**Posts:** 4

## Post 1 by @a-barbieri — 2018-12-18T12:02:27Z

I’ve been using Sage few years ago and now I wanted to try version 9. I immediately came across a weird behaviour: running `yarn start` the`jQuery(document).ready()`function is called **before** CSS is applied to page.

To confirm the issue I tried to move my CSS from my scss file to the actual HTML tag. With inline style doc ready behaves correctly.

Now, how can I load CSS before doc ready? Or at least, is there any event that I can listen to in order to run my scripts?

---

## Post 2 by @a-barbieri — 2018-12-18T13:54:29Z

Sounds like a Browsersync issue, and also an old one:

> Right now I’m working on my theme’s UX as it relates to initial page load, which involves hidden content and transitions that reveal content. It’s not playing nicely with the way the CSS is getting injected via JS because of how the page first starts with no CSS, and initial styling of elements is affected as a result, which interferes with my JS revealing code. I’m trying to test this as closely from the point of view of a member of the public as possible, from the initial page load, so I’m deliberately bypassing BrowserSync to run these tests (accessing directly via `devurl.dev` ). But even on `devurl.dev` the loading of CSS is noticeably delayed and causing problems with the UX; I guess webpack is what injects the CSS?

from

> [@Consequences of absent main.css with 'yarn start' (Sage 9)](https://discourse.roots.io/t/consequences-of-absent-main-css-with-yarn-start-sage-9/10755/5):
>
> Thanks @alwaysblank! I’ll try giving this a shot…

---

## Post 3 by @a-barbieri — 2018-12-18T14:28:29Z

I’ve crafted a workaround which works great and can be shipped in production without affecting the normal behaviour…

**The concept is to wait the css to be applied and then execute any javascript.**

**STEP 1**

On your `resources/views/layouts/app.blade.php` add `style="opacity: 0"` to the `body` tag this way:

```
<body @php body_class() @endphp style="opacity: 0">
```

**STEP 2**

Place this style on your `resources/assets/styles/common/_global.scss`:

```
body {
  opacity: 1 !important;
}
```

**STEP 3**

Change your doc ready function in `resources/assets/scripts/main.js`

```
// Load Events
jQuery(document).ready(checkStyleIsLoaded);

// Check if style is loaded
function checkStyleIsLoaded() {
  // Get the current opacity of the body tag
  const opacity = window
    .getComputedStyle(document.body)
    .getPropertyValue('opacity');
  // If opacity is 1 (CSS has been loaded!) then run your scripts
  if (opacity === '1') { routes.loadEvents() } 
  // If opacity is 0 then wait for other 100ms
  else { setTimeout(checkStyleIsLoaded, 100); }
}
```

---

## Post 4 by @zdol — 2019-01-13T17:43:42Z

I have found that the missing css was causing layout issues, and scripts that relied on dimensions set by css were fine on production but hit-n-miss on development.

On `webpack.config.js` I disabled the CleanPlugin when watcher is on, so then I start with `yarn build && yarn start.`

```
// remove this from plugins
new CleanPlugin([config.paths.dist], {
    root: config.paths.root,
    verbose: false,
}),

// add this before module.exports
if (!config.enabled.watcher) {
  webpackConfig.plugins.push(new CleanPlugin([config.paths.dist], {
    root: config.paths.root,
    verbose: false,
  }));
}
```

Unfortunately, depending on your stage of development, after a while you will want to restart the dev server, as initial css will be out of date, but at least you avoid the missing css related errors.

---

## Post 5 by @system — 2019-01-29T12:02:27Z

This topic was automatically closed after 42 days. New replies are no longer allowed.