loading...
Cover image for Safari CSS hack

Safari CSS hack

divyajyotiuk profile image Divyajyoti Ukirde Updated on ・1 min read

Browsers have their own way of interpreting code. There isn't any universal browser as such. Well, it depends on people's choice!
A good web developer should always check the responsiveness and compatibility of her code on various devices and whether the website is working as expected. While developing website, I came across Safari behaving differently.

Well, on searching I did find that Safari does not support

position: sticky;
Enter fullscreen mode Exit fullscreen mode

but works with

position: -webkit-sticky;
Enter fullscreen mode Exit fullscreen mode

since Webkit is the HTML/CSS rendering engine for Apple/Safari.

Also Safari has some problem with

overflow: hidden;
Enter fullscreen mode Exit fullscreen mode

as well. When you search you'll find various people trying to provide solution for this.

Getting frustrated, I tried to find CSS hack for Safari and came across this on stackoverflow.

/* Only Safari 10.1+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .footer-text { 

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

    }
}}
Enter fullscreen mode Exit fullscreen mode

I found this solution working for me.

But this is NOT a recommended solution. You should be able to write perfect code for all types of browsers and do extensive testing so that your website never breaks!

Discussion

pic
Editor guide