loading...

Safari CSS hack

divyajyotiuk profile image Divyajyoti Ukirde ・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;

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!

Posted on by:

divyajyotiuk profile

Divyajyoti Ukirde

@divyajyotiuk

I'm currently 🌱 learning and πŸ”­ working on the Javascript Ecosystem. πŸ˜„ Pronouns: she/her ⚑ Fun fact: I have a Computer Engineering background but the whole credit goes to Google and Stack Overflow

Discussion

markdown guide