4

I have a number of D7 sites that "broke" recently when I applied 7.39 and a few other updates. By "broke" I mean the site's CSS styling completely disappeared. I can easily fix by disabling CSS aggregation, so I know that's the cause.

At first I thought it might be a Omega 3.x problem since all sites initially affected, but then a site based on Bootstrap had the same problem. (The CSS doesn't always break right away).

What steps can I take to troubleshoot to determine the root cause?

Edit - to add more detail based on Clive's questions below:

  1. Page source does contain <link>'s to aggregated CSS files (5 total)
  2. Aggregated CSS files do exist on server
  3. Status codes are 304 (4) and 200 (1)
  4. Folder permissions seem OK
  • maybe there is several reason for this problem but I think the aggregation cant create fie in public directory or you have a syntax mistake in one of your CSS files – Yusef Mohamadi Aug 26 '15 at 18:28
  • What were your "few other updates"? – othermachines Aug 26 '15 at 18:38
  • I had 6 sites total break, and I believe the only updates in common with all were Drupal 7.39 and ctools 1.9 – Dave Bruns Aug 26 '15 at 18:49
  • Is anything showing up as red or yellow on the Status Report? – mpdonadio Aug 26 '15 at 20:11
  • Status report looks good. – Dave Bruns Aug 26 '15 at 21:13
7

Some initial things to check:

  • Clear the cache (if you're running advagg, clear its cache). You can end up with stale file references sometimes.
  • Find out what's happening to the missing CSS:
    • When the styles go missing, does the page source contain a <link> to an aggregated CSS file? If not, check for modules/themes implementing hook_html_head_alter(), hook_css_alter(), or hook_preprocess_html(), and see if they're doing anything strange.
    • If the source does contain the <link>, what status code is the browser returning for the request? 404? You might have a stale cache issue. Clear all caches including those on any reverse proxy you're running. It might easily be something else, would require more intimate debugging. 500? Check the server logs, that should give you clues as to where things are failing.
    • If it's 200, does the requested file actually contain the styles it's supposed to? If not, you might be looking at a cache issue again, or potentially an issue with build tools (Compass/Gulp/Grunt/etc).
  • Switch the theme to a core one. Does it have the same problem? If so, it's probably a module or server setting at fault. If not, it's likely to be a problem with the theme.
  • Make sure permissions for your files folder are at the right level - the web server must be able to write to that folder to store the aggregated files. This is less likely to be an issue if the files are being created successfully, but it's worth double-checking you don't have an intermittent file system issue (if it's over NFS for example)

Getting the answers to those questions will help to narrow down the source of the problem, but unfortunately it's difficult to give specific advice as to where you should look in the code, as there are a lot of points problems could occur, and a lot of different modules you could have installed, at varying versions.

  • Great list, Clive, thanks. I've got a new problem now in that I can't reproduce (so far). What's odd is that it was reproducible a few days ago when I first discovered. – Dave Bruns Aug 26 '15 at 19:10
  • @DaveBruns - Most likely a cache issue. To avoid missing css in the future the advagg module should be used. – mikeytown2 Aug 26 '15 at 21:26
  • I was able to reproduce on one site and added some more info above. @mikeytown2 - I've had advagg recommended before and will take a look - thanks. – Dave Bruns Aug 26 '15 at 22:01
1

I am experiencing this problem as well. I'm adding a new answer since I don't have enough reputation to comment on Clive's response.

I don't have a final fix for this, but I have found the following:

  • The CSS from my theme (plus the base theme and module CSS) is being aggregated and loaded into the page as I would expect. I can inspect it in Chrome's development tools and confirm that it's there.
  • However, only the CSS from the first CSS file in my theme is actually being applied. I'm using Adaptive as a base theme, so this means global.base.css.
  • If I copy my CSS overrides into this file, they are applied to the site. This is a fix of sorts, since it now allows me to aggregate the CSS without any problems. It's an imperfect fix since the issue/bug remains.
  • The issue relates to core CSS aggregation. Installing Advagg neither helps nor hinders.
  • I ran CSS validation on my CSS overrides. I didn't see any showstoppers. However, the fact that the code works fine in the first CSS file listed in my theme's info file but not in the fifth file when aggregation is enabled, suggests it probably isn't a validation issue.

One possibility is that there is a bug in AdaptiveTheme that breaks when D7.39 and/or CTools 1.9 are installed. I haven't ruled that out yet. But I have other sites with this combination that are not affected so I'm disinclined to point the finger at AdaptiveTheme.

I'm now working through the modules installed on this site and a similar site that isn't affected to try and find a module that might be causing the problem.

  • After further investigation, it appears that there is one CSS file in my theme that is causing the problem. This file is the second file in the theme. I tried moving my other CSS files above this file, and it seems to have resolved the issue. – millionleaves Aug 30 '15 at 0:39
  • The file causing the issue is global.style.css, which is part of at_subtheme. I replaced it with the original file from at_subtheme, which also resolved the issue. So at this point, I'd say it's some faulty CSS in my copy of that file, which I now need to track down and remove. – millionleaves Aug 30 '15 at 0:50
  • That sounds like a bad bracket somewhere. – Les Lim Sep 2 '15 at 5:03
  • Thanks ... yes, it turned out I'd transposed a ; and ) in a single line of code. – millionleaves Sep 17 '15 at 5:22
0

Problems with aggregated CSS files are very often because of unclosed or mismatched curly brackets in one of the individual files.

When there is an unclosed curly bracket in 1 out of 15 CSS files, the error is limited to that file, and some browsers will assume the closing bracket at the end of the file. The other 14 correct CSS files will apply normally.

When those 15 CSS files are concatenated together through aggregation, that unclosed bracket now contains all of the style rules that appear after it. They will not be evaluated.

You may want to check each individual CSS file. A linter or a good IDE with error highlighting can work wonders.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.