DEV Community

Cover image for Safari CSS hack
Divyajyoti Ukirde
Divyajyoti Ukirde

Posted on • Edited on

Safari CSS hack

#todayilearned #css #safari #webdev

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!

Top comments (0)