Title: currentColor seems to get "stuck" in Safari
Tags: css;safari;mobile-safari
Question: I'm trying to use CSS currentColor as a border-color to generate CSS triangles using :after content. This works great in all browsers I've tried, except one: Safari seems to be caching the currentColor from the first triangle it generates, and then using that everywhere.
Here's what I'm seeing -- expected behavior from Chrome (and Firefox, and IE9+):
Incorrect behavior from Safari 8.0.4 on Yosemite 10.10.2 (same on iOS 8.2) -- notice all three triangles are red, not the currentColor of their elements:
Here's a fiddle with the full code demonstrating the problem.
The relevant CSS:
span {
display: inline-block;
border-bottom: 2px solid currentColor;
span75b5:f2c1:f5d7:b954:8dc3:cee9:baf:a8c0ter {
/* Generate a triangle (based on Foundation's css-triangle mixin) */
content:"";
display: inline-block;
width: 0;
height: 0;
border: inset 0.4em;
/* Safari seems to cache this currentColor... */
border-color: currentColor transparent transparent transparent;
border-top-style: solid;
.red { color: #c00; }
.blue { color: #009; }
The HTML is simple:
<div&gt;
<span class="red"&gt;Red</span&gt;
<span&gt;Default</span&gt;
<span class="blue"&gt;Blue</span&gt;
</div&gt;
Is this a bug in Safari? A matter of interpretation on the CSS spec?
More importantly, any suggestions for working around this? I'd hate to have to explicitly declare the color in separate :after rules for each element. (Using currentColor really simplifies maintenance as our other CSS changes.)
Comment: This is probably similar to [this question](http://stackoverflow.com/questions/23936150/issues-with-css-currentcolor-keyword-in-ios-and-safari), which is using currentColor with other CSS selectors. But the only responses there so far claim this is expected behavior (which seems in conflict with all other browser implementations), or suggest avoiding currentColor altogether (which I don't think can work for my case).

Here is the accepted answer: So, this turns out to be an actual Safari bug (which might be fixed soon).
I was able to work around it using this suggestion that border-color defaults to currentColor. Replace this:
border-color: currentColor transparent transparent transparent;
with expanded properties that avoid mentioning currentColor:
/* border-top-color: currentColor; is the default behavior */
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
and the problem goes away in Safari (and it still works in the other browsers).
Comment for this answer: Although the WebKit bug was resolved on 2015-03-29, the fix still doesn't seem to have landed in Safari 8.0.7.
Comment for this answer: This seems to be fixed as of Safari 9.0.2 (maybe earlier), so the workarounds should no longer be necessary.
Comment for this answer: @TimMalone in Safari on iOS 9.3.3, the [demonstration fiddle](https://jsfiddle.net/medmunds/kkbnm6cm/) from the question seems to work fine. Are you maybe using an earlier iOS version? [navigator.userAgent: ... AppleWebKit/601.1.46 ...]
Comment for this answer: This still appears to be an issue on iOS Safari (or at least, a very similar bug).

Here is another answer: Even I faced a similar issue, so i have to go with a small js trick.
With this trick we can use the currentColor attribute to be set correctly in the desired elements. but it can be achieved only for normal elements. so i moved the pseudo elements into normal elements.
You have to force safari to redraw elements to achieve this. To achieve redrawing elements simply hide and show it.
var nodeStack =[element];
while (node = nodeStack.pop()) {
if (node.nodeType == 1) {
node.style.display="none";
node.style.display="";
var i = node.childNodes.length;
while (i--) {
nodeStack.push(node.childNodes[i]);
}
Check this simple codepen (Your code with little modification)
and also read this for brief info
Pseudo elements cannot be achieved through this trick. You have to move that into a span or some other element.
Comment for this answer: Thanks for offering another option.
Comment for this answer: It looks like Safari finally picked up the Webkit bugfix (as of 9.0.2, or maybe earlier), so the workarounds should no longer be necessary.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:04/01/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<css><safari><mobile-safari>', 'Title': 'currentColor seems to get "stuck" in Safari', 'ViewCount': 2026, 'id': 29400291, 'user_AboutMe': '<ul>\n<li>Co-founder: <a href="https://www.planapple.com" rel="nofollow noreferrer">Planapple</a> travel-planning app (Django, JavaScript, etc.)</li>\n<li>Maintainer: <a href="https://github.com/anymail/django-anymail" rel="nofollow noreferrer">Anymail</a> Django bindings for transactional email service providers\nlike Mailgun, Postmark, SendGrid and SparkPost </li>\n<li>Past lives: Eyefi, Macromedia, <a href="https://www.linkedin.com/in/medmunds" rel="nofollow noreferrer">and more</a></li>\n</ul>\n', 'user_AccountId': 325676.0, 'user_DisplayName': 'medmunds', 'user_Reputation': 5620.0, 'user_Views': 242.0, 'user_id': 647002.0}}