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.

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
28 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

  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

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: