Journal of a Web Professional in Brussels

CSS Media Queries messed up in firefox by LastPass

CSS Media Queries are a great new feature to manage the screen space. If you don’t know what CSS Media queries are, read this handy tutorial on CSS Media Queries. I’m planning to use media queries on a next project which will use the full available screen space as a core conceptual element, so i did a bit of functional experimentation just to make sure :

  1. CSS Media Queries apply to the viewport and not to the device width (so to a non-maximized browser window)
  2. the browsers refresh the screen to reflect the proper styles on resize (and not on reload)

I was glad to find out that both statements are true. But during the experiment, I discovered a weird phenomenon: Firefox 3.6.12 does not take into account the queries targetted to a width below 515px, whereas Google Chrome (7.0) does.

You can see it for yourself on this demo.

Update: LastPass firefox plugin is the culprit. If i desactivate it, the bug disappears.

The Conversation

8 Responses to CSS Media Queries messed up in firefox by LastPass

  1. Denis P. says:

    I have test your demo in FF 3.6.12 (win7 64bit) and I don't have your weird phenomenon. I have the same result on Chrome and FF
    All color changes are correctly display.

  2. I confirm: disabling all firefox plugins made the demo work! Now, onto finding which one is the culprit in my list of 30 or so plugins…

  3. Adam Aaron says:

    I've also run into this bug today. I've narrowed it down to a conflict of add-ons. Specifically 1Password, Evernote Clipper, and DownloadHelper. They are all up to date but when ever more than one of those is enabled it causes the bug to show. If I disable the page works fine.

  4. Pingback: CSS Media Queries messed up in firefox by LastPass | WebDino.net

  5. Thank you for your post it has helped me solve a problem with Media Queries in Firefox.

    I was having a similar problem where-by, if you 3 queries in a row for different screen sizes, only the first two would work. It worked fine in Chrome but not Firefox, which made me think Firefox did not work properly.

    In the end, it was a plugin (Hootbar), which was causing the problem.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Belgians do IT better _