Chrome is not picking up CSS media queries when using optimisations in bundles

Question

As I have mentioned in the title - chrome is not picking up the media queries. For example:

@media only screen and (min-width: 481px) and (max-width: 784px)
@media (min-width: 481px) and (max-width: 784px)

It works if I leave only one width property:

@media only screen and (min-width: 481px)

All other browsers picks this up ok. Did anyone of you came to this issue as well and can help me to get on track?

Edit

I'm using the latest version of chrome (Version 32.0.1700.76 m)

Answer 1

There is a bug in chrome where it won't read media queries without the correct spacing. If you look at your bundled source code (when minified) you will probably notice that @media (min-width: 481px) and (max-width: 784px) has been transformed to @media (min-width: 481px)and (max-width: 784px) (notice the missing space after the bracket).

This article explains the problem well and also a fix which is basically to create a class that implements IBundleTransform and implement Process at which point you can check for this problem and fix it:

public class CssMinifyMQ : IBundleTransform {
    public void Process(BundleContext context, BundleResponse response) {
        response.ContentType = "text/css";
        response.Content = Regex.Replace(response.Content, "(\\) and ( )?\\()", ") and (");
    }
}

bundles.Add(
    new Bundle("~/CSS/Base", new CssMinifyMQ()).Include("~/Content/Base/*.css")
);

HTH!