1

Selecting the option to aggregate and compress css files breaks display in internet explorer 11. It displays fine with other browsers, or fine in ie11 if I deselect that option. The site in question is wowforfun.org

Thanks in advance.

Edit: Here's a part of the css as served to ie:

‹ µYér¤8þ?OÁŽ£#Ú³M•¶!öÇ>Á>ƒ T 1 F»Üï¾™:@ªÚîÙí—Ë:Ryç§Ô é%ÏxÝVTÒáÈENE²oÏAÇ+–§ü•ŠSÅß’’å9mÒ–wL2Þ$äzIÓ!krzNöq<޸Ă¾*ÖÉ°“ïMÞÐtþ;d5)ÌhMDÁš$N[’ç¬)ŸRņ#É^

Looks like it wasn't uncompressed at all.

Edit 2:

My .htaccess section related to compression:

<IfModule mod_headers.c>
# Serve gzip compressed CSS files if they exist and the client accepts gzip.
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.css $1\.css\.gz [QSA]

# Serve gzip compressed JS files if they exist and the client accepts gzip.
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.js $1\.js\.gz [QSA]

# Serve correct content types, and prevent mod_deflate double gzip.
RewriteRule \.css\.gz$ - [T=text/css,E=no-gzip:1]
RewriteRule \.js\.gz$ - [T=text/javascript,E=no-gzip:1]


<FilesMatch "(\.js\.gz|\.css\.gz)$">
  # Serve correct encoding type.
  Header set Content-Encoding gzip
  # Force proxies to cache gzipped & non-gzipped css/js files separately.
  Header append Vary Accept-Encoding
</FilesMatch>

And here's the settings.php section:

# $conf['css_gzip_compression'] = FALSE;
# $conf['js_gzip_compression'] = FALSE;

I've tried those two lines both commented and uncommented, didn't make a difference.

4
  • What version of Drupal? I think it may matter here. – mpdonadio Feb 26 '14 at 0:52
  • 7.26, everything is updated to the latest version. – user26756 Feb 26 '14 at 0:53
  • One more question. Does this just happen with your theme? If you switch to Bartik, is it broken? What about Seven (the default admin theme)? – mpdonadio Feb 26 '14 at 0:57
  • Seems to happen with all themes, I've tried Bartik, Responsive Bartik, Seven, and none of them seem to work. – user26756 Feb 26 '14 at 1:04
2

The Advanced CSS/JS Aggregation Module might make it work correctly. If not, the advagg validator sub module might help identify the CSS that is breaking in IE.

7
  • I've tried the module, unfortunately it didn't seem to change anything. The css isn't what's breaking it, since the only css I get out of ie is something like this: ‹ µYér¤8þ?OÁŽ£#Ú³M•¶!öÇ>Á>ƒ T 1 F»Üï¾™:@ªÚîÙí—Ë:Ryç§Ô é%ÏxÝVTÒáÈENE²oÏAÇ+–§ü•ŠSÅß’’å9mÒ–wL2Þ$äzIÓ!krzNöq<޸Ă¾*ÖÉ°“ïMÞÐtþ;d5)ÌhMDÁš$N[’ç¬)ŸRņ#É^ – user26756 Feb 26 '14 at 1:08
  • This is what I'm seeing in IE: imgur.com/P5sMIdv Sounds like you could be having an issue with gzip not working. Try disabling gzip in advagg admin/config/development/performance/advagg/ "Create .gz files" – mikeytown2 Feb 26 '14 at 1:17
  • That's what I see as well. No styles whatsoever. I see the gibberish only if I paste the linked css file address onto the browser address bar. Removing gzip option didn't change anything either, it's currently disabled. – user26756 Feb 26 '14 at 1:28
  • Could this also be the htaccess rule (or is it in settings.php) that does the same thing? – mpdonadio Feb 26 '14 at 1:29
  • 1
    It probably worked because I just enabled Fences module, which seemed to fix the issue. I realized there was a problem with the head code generated, it was generating a doctype of html4 with IE, while it generated html5 for Firefox. After enabling Fences, it generates html5 doctype for IE as well, and enabling compression with your module did not break the styles. I'm just wondering why it happened in the first place. (I didn't remove any part of .htaccess either, but it still works after Fences) – user26756 Feb 26 '14 at 1:50

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.