Safari CSS hack

Subscribe to my newsletter and never miss my upcoming articles

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 their 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;

but works with

position: -webkit-sticky;

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

Also Safari has some problem with

overflow: hidden;

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; 

    }
}}

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!

No Comments Yet