CODEWITHSUNDEEP
ioscssgoogle-chromesafariless
E. John
E. John

Reputation: 1

CSS inline style selector not working for iOS (safari, chrome)

I have something like this:

HTML:

<body style="overflow: hidden;">

<div class="test"></div>

</body>

CSS/LESS:

body[style*="overflow: hidden"] {
.test {z-index: 1;}
}

When body has inline style overflow: hidden I'm trying to give some style to the test div. This is working in all browsers, all android devices but on iOS (iphone x, 8 ect.) it's not working. It does not matter safari or chrome on iOS is not working.

Any suggestions?

Upvotes: 0

Views: 1740

Answers (1)

Vanch
Vanch

Reputation: 296

I think it has to match exactly. Try it without the asterix (*).

body[style="overflow: hidden;"] {
    .test {z-index: 1;}
}

The style needs to be an exact match.

However, I would advise you to use classes for this, the above code is very ugly.

Try this:

HTML

<body class="overflow-hidden">
    <div class="test"></div>  
</body>

CSS

.overflow-hidden .test {
    z-index: 1;
}

LESS/SASS

.overflow-hidden {
    .test {
        z-index: 1;
    }
}

Upvotes: 1

Related Questions