The unexpected behavior applies specifically to the color property: (AFAIK)
It looks like when an element has all:inherit (or all: unset) iOS locks the color of that element to it's inherited (or inital) value at all costs - against the cascading rules.
Given the following really simple markup
<div>Hi there</div>
with CSS:
body {
color: red;
border: 5px solid red;
}
div {
all: inherit;
color: green;
border: 5px solid green;
}
Snippet demo: (open with iOS device such as iPhone / iPad to see the issue)
body {
color: red;
border: 5px solid red;
}
div {
all: inherit;
color: green;
border: 5px solid green;
}<div>Hi there</div>...I would expect the resulting color of both the text and the border of the div to be green (and this is in fact the result on Chrome and firefox) however on iOS (10.3+)* the resulting border color is green however the text color is red!
An even more bizarre iOS issue is that when an element has all:inherit (or unset) there seems to be no way to change the color of a descendant element!
Snippet Demo:
body {
color: red;
}
div {
all: inherit;
}
.inner {
color: green;
}<div>Hi there <span><strong class="inner">inner element</strong></span></div>...so in the above snippet iOS colors the inner element in red!
Note: caniuse says that iOS safari supports the CSS all property as of version 9.3 and doesn't report any known issues.
... so: Is there a workaround for this in iOS?
Currently, because of this issue I don't see any way of using the all property!
I tested three iOS devices: iphone 6s running iOS 10.3, iphone 7 running iOS 11 and iPad running iOS 11.1
