Issues with CSS `currentColor` keyword in iOS and Safari
css, safari, webkit
Solution
This is one of the issue I've faced recently. border-color inherit the same color as font by default so The solution is not to use currentColor at all. Try breaking down border properties. for e.g.
border: 1px solid currentColor
to
border-width: 1px;
border-style: solid;
I've made a little fiddle for you http://jsfiddle.net/6of25jw8/
Problem
TL;DR - Here's a fiddle (thank you @NicoO) : In Safari, initial "red" colour gets applied to all other instances of `currentColor`. - How can I fix, with CSS, the inheritance issue of `currentColor`? - Or how can I feature-detect support for the CSS colour keyword `currentColor`? - I also need to detect partial support. For example, Apple Webkit is unstable to use in most cases. Full Story I am using the CSS colour keyword `currentColor` in a project. Using it rather profusely, I might add. For example: I'm using it on a Site Header component that floats over a full-viewport Carousel. Each slide has a varying `background-color` and a contrasting `color` assigned to it. When the slide changes, it updates the Site Header to inform it of the new contrast. The Site Header's `color` is swapped accordingly and anything with the `inherit` or `currentColor` keyword gets updated, such as an `<svg>`'s `fill`, some `border-color`s, and some `background-color`s. Another, simpler, example: I have various colour palettes that I apply as a class name (e.g., `bg--emerald` or `bg--blue`) onto boxes. The contents of these boxes can be links or buttons or just text. With `currentColor` applied to button borders, for instance, the CSS becomes quite simple because I just need to set the `color` property for each colour scheme. No need to update each affected child node. All this is very slick. Support is superb under Firefox, Chrome, Opera, Internet Explorer 9+, and their "mobile" equivalents. Unfortunately, Apple Webkit (iOS Safari and OSX Safari) is suffering from poor and erratic support. It doesn't work everywhere, nor all the time—even in the simplest of examples—nor does it repaint very well or consistently when needed. I've done some searching and haven't found many people using this practical CSS keyword and ergo no existing means to feature-detect it or polyfill it. I don't know how I would go about making a Modernizr test for this feature. Especially to detect partial-support like I'd need for Apple Webkit. I'm probably just going to browser-detect it at the moment until I can think of a solution or stumble upon someone with the smarts that can think of a solution faster than me. JSFiddle I've modified the fiddle (linked above) to grossly replicate the issues I'm having. What I've noticed is it's like `currentColor` gets locked with the initially inherited value ("red") and carries it along when applied to everything else. For example, if you switch `:nth-child(1)`'s `color` to something else that new value gets applied to all following elements using `currentColor`. Browsers Broken - OSX, Safari 6–7 - iOS 6–7, Safari Works - Windows, Safari 5 - iOS 5, Safari Something in Safari 6 and up got borked. Since this is such an underrated feature, nobody noticed.