CSS Hacks for Safari 6.1, 7, 8, 9 and 10 (Not Chrome!)

These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

UPDATED for Safari 10.1 (Late March 2017 Update)

Safari has changed since version 6.1, as many have noticed.

Please note: if you are using Chrome on iOS (at least in versions 6.1-9) and you wonder why none of the hacks seem to be separating Chrome from Safari, it is because the iOS version of Chrome is using the Safari engine. It uses Safari hacks not the Chrome ones. More about that here: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/

That out of the way here are hacks for you to use for more recent versions of Safari.

Please be aware that these are hacks, and some of them are truly non-standard CSS code (which is why only some browsers are affected by them) and will not filter through SASS or other compilers or filters because they try to remove the non-standard data or convert to cross-browser form which completely destroys what we are trying to do here. To use them anyway, in many cases you must use your filter first, then apply the hack afterward. Such is the nature of a hack and does require the extra work of either including an external unfiltered CSS file or code block afterward. 

For 9 specifically, I have been working on a page for that, so – rather than retype the same code, go here for hacks to affect Safari 9 (including a hack for iOS only now): My Safari 9 CSS Hacks

Here is one for Safari 7.1 and newer:

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}
Author: Jeff Clayton

Here is one I worked out for Safari 10.1+:
(YES the double media query is a necessity!)

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media
{
    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

Author: Jeff Clayton

This hack I worked out by combining multiple other hacks is for 6.1-10.0 (not 10.1):

/* Safari 6.1-10.0 (10.1 is the latest version of Safari at this time) */

@media screen and (min-color-index:0) 
and(-webkit-min-device-pixel-ratio:0) { @media
{
    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

Author: Jeff Clayton

Below is a hack that separates 6.1-7.0 from the above 7.1+
These also required a combination of multiple hacks in order to get the right result:

/* Safari 6.1-7.0 */

@media screen and (-webkit-min-device-pixel-ratio:0) 
and (min-color-index:0)
{  
   .safari_only {(;

      color:#0000FF; 
      background-color:#CCCCCC; 

    );}
}

Author: Jeff Clayton

To use them:

This text will be Blue in Safari

To see them working live, I have created a test page here:

http://browserstrangeness.bitbucket.io/css_hacks.html#webkit

and mirror here:

http://browserstrangeness.github.io/css_hacks.html#webkit

Advertisements

IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for BrowserHacks.com for the purpose of repairing web sites. PS-- CSS hacks are fun, but please attempt good CSS first unless in a bind. See Test Pages: https://browserstrangeness.bitbucket.io and https://browserstrangeness.github.io

Tagged with: , , , , , , , , , , , , ,
Posted in Apple, Computers, CSS, CSS Hacks, Hacks, iOS, Macintosh, OS X 10.10 Yosemite, OS X 10.6 Snow Leopard, OS X 10.7 Lion, OS X 10.8 Mountain Lion, OS X 10.9 Mavericks, Safari, Safari-All, Tech, Web, Web Browser, Web Browsers
43 comments on “CSS Hacks for Safari 6.1, 7, 8, 9 and 10 (Not Chrome!)
  1. thanks for your tips, really helpfull.

    Like

    • Jeff Clayton says:

      Most welcome, glad my efforts could help!

      Like

    • Leonie says:

      Message from 2017 here!

      We have just applied this fix in a bootstrap 4 based template and it works.
      However, with the 2nd empty media query the scss compiler (obviously) throws an error for improper syntax.
      Adding it after it has been compiled was not a viable long-term solution, so we tried removing the 2nd media query altogether.
      We have tested it, the compiler agrees and it works!

      Thank you very much for this amazing fix, it has surely prevented a brain bleed 😉

      Like

      • Jeff Clayton says:

        You will find problems with the hack by removing it, the second media query rules out MANY other browsers. In other words you have rendered much of what it does useless. The ones with real ‘hack’ potential work because they are only allowed through browsers that allow an error to pass through. The way you have to use those is enter them after the scss processor is complete. What you have is just a partial. If you aren’t worried about 6.1-7.0 you can do the 7.1+ (includes also 6.2 because that patch update was added by apple much later) and it should compile okay.

        Liked by 1 person

      • Jeff Clayton says:

        You may be able to get it to compile by changing the @media { part to say @media all and {
        [add ‘all and’ to the second query] and it may pass inspection. Current browsers handle nested media queries as a standard so scss may be okay with it.

        Like

      • Leonie says:

        Hmm, good to know.
        We ran into issues on Safari 6.0.2 up to the latest safari browsers.

        First we tried ‘all’ and the compiler removed the entire bit of code. Will try ‘all and’ and get back to you.

        Many thanks for your swift reply and advice!

        Like

      • Jeff Clayton says:

        dual media queries weren’t available in safari until 6.1 fyi so that will not work for 6.0.X — however you can use one that targets 5.1-6.0 (it also affects very old chrome versions nobody uses any more so should not cause problems) — this one should do the trick: _::-moz-svg-foreign-content, :root .selector { property:value; }
        (chrome 10-24 is the old set i mean but should not be an issue)

        Like

      • Leonie says:

        Adding and all to the second media query in .scss doesn’t compile sadly.
        I suppose there is no real way other than adding it in after compiling. Which will suck – the site is going live but will be added to in the future –
        We can not forget to keep putting it in manually after compiling the scss files every time we change something in the scss files.

        Like

      • Jeff Clayton says:

        Of course, that is just the nature of the beast with non-standard (browser-targeted) css hacks that rely on bugs rather than programmatic forms. And you are welcome of course.

        Liked by 1 person

      • Jeff Clayton says:

        Depending on the hack, be sure you have the missing space after the ‘and’ and if you are using one that has extra brackets and semicolons they both are ones that should irritate scss — if either are removed you have the same issue– lack of capability — here is the missing space i refer to (not a mistake): and(-webkit-min-device-pixel-ratio:0)

        Like

      • Jonathan says:

        Hi,

        When removing the second @media, did you notice if the styles apply only to safari?

        When removing the second @media, they also apply to chrome according to my test

        Like

      • Jeff Clayton says:

        You are correct, the dual media query is NOT just for one browser, it rules out many that should not be included. Most old browsers are also ruled out by the dual query. If you remove it the hack is rendered nearly useless, so it is not recommended.

        Liked by 1 person

  2. This is the only solution that worked after many, many hours of banging my head against a brick wall. Thank you!!!

    Like

    • Jeff Clayton says:

      You are very welcome – it took a very large amount of time and effort to create these as I had the same frustration — and keeping the results to myself seemed a little unfair!

      Like

  3. Aspriant says:

    Thanks for your Awesome Article.

    Like

  4. Geraldo Luiz says:

    Thank you very much.

    Like

  5. guldoe says:

    Thanks for all, are any hack safari vs chrome in ios

    Like

  6. Kapil says:

    Awsome Buddy
    Great Help
    Great Thanks

    Like

  7. THANK YOU!!! At approximately 10:30 this morning, the “Safari 8 and newer” hack made it possible for me to not have to delay our departure this afternoon for D.C. to visit our daughter on her spring break. (I’ll ask my wife to send some good karma your way.)

    Like

  8. Shane says:

    Do we replace .safari_only with the name of the class we are modifying?

    Like

  9. Sidhi says:

    Hey Jeff Thanks for the hacks that you provided but when I use css hack for safari 10+ my whole app doesn’t come up. I wanted to fix the footer in safari. the footer looks good in chrome,IE and firefox. We use angular2. Is there any thing else that can be done. Example:
    .footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 40px;
    @media not all and (min-resolution:.001dpcm) { @media
    {
    .safari_only {

    position: fixed;

    }
    }}

    }

    Please let me know if you have any other hack.

    Like

    • Jeff Clayton says:

      Media queries go outside of general css – you need to try this instead – post your media query after the rule not within it. Try it like this:

      .footer {
      position: relative;
      bottom: 0;
      width: 100%;
      height: 40px;
      }

      @media not all and (min-resolution:.001dpcm) { @media
      { /* Safari 10+ css goes here */

      .footer {
      position: fixed;
      }

      }}

      That should do it for you. Treat media queries (and supports features for that matter) as wrappers instead of regular css code and it will help you in general. Note that you also needed to change the class name from safari_only to footer so that it will override it in sequential order on the css document page.

      Like

  10. Elena says:

    hello, can u please help me….. i also have a problem with scss – and it doesn’t compile – mistakes…..”Error: media query expression must begin with ‘(‘”

    /* Safari 10.1+ */

    @media not all and (min-resolution:.001dpcm) { @media
    {
    @media(max-width: 320px){
    margin-right: 1px;
    }
    }}

    /* Safari 6.1-10.0 (10.1 is the latest version of Safari at this time) */

    @media screen and (min-color-index:0)
    and(-webkit-min-device-pixel-ratio:0) { @media
    {
    @media(max-width: 320px){
    margin-right: 1px;
    }
    }}

    /* Safari 6.1-7.0 */

    @media screen and (-webkit-min-device-pixel-ratio:0)
    and (min-color-index:0)
    {
    @media(max-width: 320px){
    margin-right: 1px;
    }
    }

    it doesn’t work…..maybe u will see the mistake

    Like

  11. Elena says:

    sorry. correction:

    @media not all and (min-resolution:.001dpcm) { @media
    {
    .mob-verify {
    @media(max-width: 320px){
    margin-right: 1px;
    }
    }
    }}

    /* Safari 6.1-10.0 (10.1 is the latest version of Safari at this time) */

    @media screen and (min-color-index:0)
    and(-webkit-min-device-pixel-ratio:0) { @media
    {
    .mob-verify {
    @media(max-width: 320px){
    margin-right: 1px;
    }
    }
    }}

    /* Safari 6.1-7.0 */

    @media screen and (-webkit-min-device-pixel-ratio:0)
    and (min-color-index:0)
    {
    .mob-verify {
    @media(max-width: 320px){
    margin-right: 1px;
    }
    }
    }

    Like

  12. Jeff Clayton says:

    the problem is that you are trying to put a media query within another css block. media queries need to be wrappers for css not the other way around. Also, the missing space is a hack not needed here, a space should be after @media. This one should read like so for example:
    /* Safari 6.1-7.0 */

    @media screen and (-webkit-min-device-pixel-ratio:0)
    and (min-color-index:0)
    {
    @media (max-width: 320px) {
    .mob-verify {
    margin-right: 1px;
    }
    }
    }

    Like

    • Jeff Clayton says:

      By that token the other two should be inverted (.mob-verify within the inside media query for them as well) — if SCSS hates it you may also have to use the hack AFTER SCSS as I have heard that SCSS does not always like nested media queries to begin with.

      Like

  13. Paul Brady says:

    Thanks Jeff. Valuable stuff here.

    But sadly, the Chrome 10.1 hack fails in my SASS validation. 😦

    Like

    • Jeff Clayton says:

      I know, SASS validation and other tools are looking for standard CSS that works with ALL browsers. The reason it works, and how you have to use it with a site that filters code — many CSS hacks cannot be resolved that way: You have to apply the hack AFTER the SASS validator. It is not valid code for most browsers, which is why it works only for Safari. That is also why it is legitimately termed ‘a hack’.

      Like

  14. Jeff Clayton says:

    Elaborating– the reason it is like that with Safari is that it takes more than a simple CSS change to work with Safari and separate it from Chrome. This problem has required more aggressive methods that rely on how it handles error checking among other things. While Firefox has it’s own simpler methods, Safari and Chrome attempt to share the same webkit under the hood. To separate them, one must rely on finding CSS that does not process or validate in one browser but is allowed by the other. So while some CSS hacks are simple and will validate through filters or compilers, not all of them will do that because the way they work is to confound all browsers except the target, not be allowed by them.

    Like

  15. Linda says:

    Thanks for your post.
    Sadly the Safari 10.1+ destroyes my toggle-menue on all browsers but Safari.

    —what toggle menu?

    Like

    • Jeff Clayton says:

      Is this a combination with javascript + css or pure css? It may need an edit… would you kindly provide any information at all about your project so I (or someone else) may be able to help you? More explanation is needed to verify or assist. Thanks in advance.

      Like

      • Jeff Clayton says:

        perhaps a link to a page using your menu?

        Like

      • Jeff Clayton says:

        Linda, if this is truly an honest response please include a live example. If you have css code inside only the css block for safari 10.1+ then of course it would not work in other browsers. You need to use the whole hack (not just a part of it) and also not put it through any filtering programs that alter it.

        The whole point is to segregate css code from other browsers so it may very well be working properly.

        Unfortunately I have had no examples provided to me showing lack of validity in usage and cannot help without being provided any. If you do actually need a CSS hack for Safari 10.1+ there are three I have provided here: https://browserstrangeness.bitbucket.io/css_hacks.html#safari but remember they ONLY target Safari 10.1 and up. You need to also have good css for the other browsers — outside of the wrapper that I provided you. Additionally, the code for any of the 10.1+ safari hacks I have provided are in fact valid CSS — standard media and support features queries — just not supported in any browsers except the Safari set I mentioned.

        Like

  16. porn movie says:

    Superb blog! Do you have any hints for aspiring writers?

    I’m hoping to start my own blog soon but I’m a little lost on everything.
    Would you advise starting with a free platform like
    Wordpress or go for a paid option? There are
    so many choices out there that I’m completely overwhelmed ..
    Any recommendations? Appreciate it!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: