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:
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
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
Jeff Clayton IT Director / Senior Software Engineer / Film & Photography 
thanks for your tips, really helpfull.
LikeLike
Most welcome, glad my efforts could help!
LikeLike
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 😉
LikeLike
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.
LikeLiked by 1 person
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.
LikeLike
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!
LikeLike
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)
LikeLike
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.
LikeLike
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.
LikeLiked by 1 person
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)
LikeLike
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
LikeLike
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.
LikeLiked by 1 person
cool
LikeLike
This is the only solution that worked after many, many hours of banging my head against a brick wall. Thank you!!!
LikeLike
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!
LikeLike
Thanks for your Awesome Article.
LikeLike
You are welcome!
LikeLike
Thank you very much.
LikeLike
Glad to help!
LikeLike
Thanks for all, are any hack safari vs chrome in ios
LikeLike
No because they are actually the same engine. Chrome and Firefox are using the Safari engine under the hood. You need to use the Safari hacks to target all three. You can use javascript to separate them, but they respond to the Safari hacks entirely.
LikeLiked by 1 person
But for others who may be reading this, it is only on iOS — that is not true on other OS’s.
LikeLike
Awsome Buddy
Great Help
Great Thanks
LikeLike
You are very welcome
LikeLike
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.)
LikeLike
And you made my day as well — thank you for your response!
LikeLike
Do we replace .safari_only with the name of the class we are modifying?
LikeLike
You are correct.
LikeLike
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.
LikeLike
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.
LikeLike
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
LikeLike
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;
}
}
}
LikeLike
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;
}
}
}
LikeLike
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.
LikeLike
Thanks Jeff. Valuable stuff here.
But sadly, the Chrome 10.1 hack fails in my SASS validation. 😦
LikeLike
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’.
LikeLike
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.
LikeLike
Hello,
Is there any css hack for only safari browser version 5.1 and 6
LikeLike
Not exactly — hacks for that tend to also match Chrome versions 10-24 (nobody uses any more) so you can use it without really worrying about it in today’s world. For that matter, those versions of Safari are also far out of date fyi.
LikeLike
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.
LikeLike
perhaps a link to a page using your menu?
LikeLike
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.
LikeLike
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!
LikeLike
A free one is great to start with, wordpess is fine — you can always upgrade and add features later.
LikeLike
Nice Stuff thanks
LikeLike
/* 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;
);}
}
Worked for me. Great! After a long, found some practical implementation.
LikeLike