currentColor seems to get stuck in Safari
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).
CSS color property doesn't work when used along side with pointer-events property in Safari OSX and iOS, whenever DOM gets updated
we just wasted a bit of time till we found this question, apparently, this is true we had problems with Vue.js and the DOM not being updated properly when we wanted to disable the button.
Our final solution was to add the :disabled="$props.disabled"
to the component plus adding a class as well (you should evaluate to use proper html syntax instead of a div
use a proper button
), you can do that with plain JS or Jquery as well and then style it
&--disabled {
color: $color-button-disable;
&:hover {
background-color: unset;
cursor: unset;
}
}
the final result it's the same and it works in all browsers.
How do I make text-shadow and box-shadow use the text color on all browsers?
The behavior described in CSS1 and CSS2 has been extended in Color level 3 with a currentColor
keyword value, which basically means "the computed value of color
for this element" and can be used anywhere a color value is accepted. As you might expect, this has been retconned into the border-color
propdef as its initial value, as seen in the B&B module, here.
Since almost every browser that supports box-shadow
and text-shadow
also supports currentColor
, you should be able to just specify that as the shadow color:
text-shadow: 0 0 0.5em currentColor;
box-shadow: 0 0 0.5em currentColor;
This explicitly instructs the browser to use the same color as the text, and not whatever it was programmed to use otherwise, in a way normalizing the behavior across browsers. Interactive fiddle.
Unfortunately, for some really stubborn browsers, like certain versions of some WebKit browsers, the problem lies not in the fact that they do not use currentColor
, but the fact that they do not implement currentColor
with these properties correctly. This means even if you do try to set the color value explicitly, it still won't work, because that's what they already do — they just aren't doing it correctly.
Specifically, Safari is known to have no support for currentColor
whatsoever until version 4, but for reasons I cannot comprehend, Safari 5.x fails to apply the above declarations correctly, despite being able to apply something like background-color: currentColor
just fine. I believe this is fixed in Safari 6.x and later, but since 6.x and later apply declarations without the color component correctly anyway, they don't even need this workaround.
Passing currentColor
explicitly does work around a strange bug in Firefox that prevents it from animating to and from text-shadow
or box-shadow
values without a color component — in the interactive fiddle linked above, if you change either the div:not(:hover)
rule or the div:hover
rule to remove currentColor
from either shadow declaration, that shadow won't animate in Firefox.
If you absolutely need to support old versions of WebKit browsers, you'll have no choice but to hardcode the desired color. But considering how frequently and rapidly those browsers update themselves anyway, you're probably better off worrying about old versions of IE instead. Note however that IE9 has no trouble supporting box-shadow
without the color component, and likewise for IE10 with text-shadow
, so IE does not require this workaround at all. Shock and awe.
Does Safari have issues with ES6 keyword 'let'?
Try this link: Let Keyword Browser Compatibilities
As you see in the link, Safari (9 and lower) is not supported fully by JavaScript ES6 let keyword, despite webkit. But try using safari 10. Say, are you using "use strict"? If you are then that might be the problem.Wordpress site suddenly not showing some DOM elements but mobile is fine
in your styles.css on line 10041
you have a class with opacity
set to 0
.page-has-animation .page-content .tm-animation {
opacity: 0;
}
and its missing the class to fade it in. (.fade-in.animate
)
Payment Request API - Basic Card on Safari
That is indeed the case. Safari only supports Apple Pay at the moment. It doesn't support basic card, unfortunately :(
https://webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/
Related Topics
Is Position: Static Identical to Position: Relative, with No Other Properties Specified
Adding Class to React Component After a Certain Amount of Time
CSS3 Background-Size: Cover Doesn't Make Image Cover Vertically
What Does "Body > *" Mean in CSS
Scale Image Until Either X or Y Is The Same as The Container and Then Crop The Rest
How to Use Firebug to Easily Find Which CSS File Defines a Particular Style
Changing Size and Content of Header at Scrolling in Browser with CSS
Inheriting Height of a Child Node (Img Inside A)
How to Center an Image Within a Col Element in Bootstrap 3+
How to Override Background Image Defined in CSS with Another CSS
What Do These "\E6##" Characters Mean
CSS3 Gradients and Border-Radius Leading to Extraneous Background in Webkit
Sass Importing Without Compiling
Moz-Placeholder Does Not Work in Firefox
How to Make Input Buttons Look Exactly The Same in All Browsers