SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Media queries not working with Safari

    Hi!

    I'm just wondering why the following media query works in FF (22.0) and Chrome (28.0.1500.71), but not Safari (6.0.5).

    In case it's relevant, I'm using the Mac OS X (10.7.5) -- laptop, not mobile.

    Thanks for your help!!!

    Also, does anyone know if it works in IE?

    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>test</title>
    <style type="text/css">
    
    body {background-color:#efefef;}
    h1 {color:black;}
    
    @media only screen and (max-width:37.5em) {
    	body {background-color:#000000;}
    	h1 {color:white;}
    }
    
    </style>
    </head>
    <body>
    
    <h1>Hi.</h1>
    
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Media queries are supported in IE9+ and you can see the full support tables here.

    As you can see Safaria 6.05 is supported so your code should work. Have you tried clearing the cache on the browser?

    Otherwise put a version online so we can test it live and see if we can spot anything.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks for your help! I have tried clearing my cache, but it's still not working

    If you want to see it just copy and paste the above code into a text file, save it with an HTML extension, and load it into your web browser.

    I've heard it works fine on Windows, but it's just not working for me.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nicolasks View Post
    If you want to see it just copy and paste the above code into a text file, save it with an HTML extension, and load it into your web browser.
    Yes I already did that

    I checked on Windows (safari 5.1.7) and OSX 10.6.8 safari 5.1.9 and the media query worked fine.

    That's why I wanted to see your actual page in case there was anything else in there that may have caused a problem. Sometimes a typo miles away from the code in question can trip up one browser but not another.

    I can't think of another reason for it not to work.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I checked on Windows (safari 5.1.7) and OSX 10.6.8 safari 5.1.9 and the media query worked fine. That's why I wanted to see your actual page in case there was anything else in there that may have caused a problem.
    Huh. Well, thank you so for trying to help me, regardless! I appreciate it. But yeah, I don't get it, I mean it's literally the above code that isn't working for me -- it's the bare-bones code I ended up with after trying to debug my actual webpage, and I fully expected to find a typo or something in the process, but nope

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Just a thought: could you have your font sizes bumped up in Safari? Try pressing Command 0 to make sure it's reset to the default font size.

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No but what you said made me figure it out!!! Thank you both for helping me work through this. The problem is, I was testing the media query not by resizing the window, but by zooming in on the page.

    So, my question isn't what I thought it was. Should I re-post this as a new question? In FF and Chrome, the media query in the above code kicks in when I zoom in on the web page, but in Safari, it doesn't. Is there anything I can do to make Safari act more like FF and Chrome here?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That used to be the same in Chrome also and was recently fixed so hopefully Safari will follow suit shortly.

    I don't see it as a big issue as it only happens when you zoom up and down - if you refresh the page the media query is triggered. A user who navigates to the page with the zoom setting already in place will see the required layout. It's only when you zoom up and down on the current page that they aren't triggered properly but hopefully the recent webkit fix will find its way into Safari eventually.

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! I didn't notice that it reset when you refreshed. Problem solved!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •