The CSS multimedia query does not apply to Firefox 37

advertisements

I was working on a website (originally designed elsewhere) adding CSS media queries to adjust the layout to make it more mobile friendly.

I had completed the work about a month ago. However, I have seen now some odd behaviour and would like to know why the following happens and how to work around it or correct it:

Some notes:

  • The website is http://www.stablesathenhampark.com
  • The website worked as intended on all browsers when it was completed (mid April 2015)
  • The issue appears only on Firefox.

The issue:

As you can see, on Chrome the CSS realigns the menu underneath the video as intended. On Firefox it does not, staying beside the video as it should at larger browser widths. These two browsers are exactly the same page, exactly the same time, right next to each other.

I have spent a good while researching the various media queries and have found that Firefox does not appear to apply a certain media query for if width < 400px

The media query which Firefox does NOT apply, but Chrome DOES:

@media only screen
and (max-width : 400px) {
    .outerBox {
        width:96% !important;
    }
    .topBox > object {
        width:98% !important;
        float:none !important;
        display:block !important;
        margin:0 auto !important;
    }
    .topBox > nav {
        background-color:#8FB4A2 !important;
        width:96% !important;
        text-align:center !important;
        }
    .topBox > nav a{
        display:inline-block !important;
    }
}

I know which media queries are and are not applied because I added a background colour identifier to the media query rules as per another post on Stack Overflow.

Now, I then researched why this was not applying, and so used Firebug to check the size of the <body> (and also <html>) element in the browser and sure enough the Firebug told me that this plugin was reading the <body> tag (and <html> tag) had a stated width of 389px.

This website worked perfectly a month ago, so what's changed? Firefox updated itself to version 37.0.2. That's the only thing I can think that would effect this. No one has updated the code on the site and it was fully working when completed.

I want the website to look on Firefox like it looks on Chrome (version 41.0.2272). This issue only applies to Firefox. On Opera, Safari and Internet Explorer the media query rules apply correctly.

Is there a way I can work around or otherwise fix this issue?

Edit: A fiddle is here: https://jsfiddle.net/5hqvm8c7/ . The fiddle appears to work as intended viewed in the JSFiddle Environment and in Firefox browser.

Replacing the <object> with an <img> also works with another fiddle: https://jsfiddle.net/ow0yjmmc/1/

Update

I have replaced the <object> tag with a static image, and the behaviour still remains the same, perfect everywhere except FireFox:

http://www.stablesathenhampark.com/indexNew.php


1.) What mobile devices rely on Firefox (or this version for that matter). Decide if this is worth caring for a mobile optimization. Also; Note: // The only way to fully accurately test on mobile is using the actual device.

2.) Make sure your viewing the exact same resolution in both browsers. Some browsers don't minimize as much as others. It looks like chrome is smaller in your screenshot there, so firefox could just not be at the defined break-point yet.

3.) Add a unique selector to that image there and force it to take the page. If the below elements don't snap into place, add a unique wrapper and do the same to them as well.

Also, tip! I always prefer using between two widths to call my media queries. Could help switching to this method as it's easier to test with IMO.

For browser testing try using this method:

/* No greater than 480px, no less than 100px */
@media (max-width:480px) and (min-width:100px) {
    .foo {
        display:none;
    }
}‚Äč