Jump to content

Inconsistent results when using the color: property


Recommended Posts

I've been using the following CSS rule…

.inset-shadow {
    color: Transparent;
    background: #8C2633;
    text-shadow: rgba(255, 255, 255, 0.4) 2px 2px 2px, 0 0 0 rgba(0, 0, 0, 0.5);

… to produce the following result:


The following is another example of this text effect…


…which can be found in the following exercise on CodePen

The problem is that the behavior of this construct is inconsistent. Specifically, the Microsoft browsers are having difficulty displaying the text when I use the "transparent" value for the CSS color property. Subsequent research would indicate that there is no such value for the color property. I tried replacing the "transparent" value with the CSS rgba function with something like this: rgba(255, 255, 255, 0.0) – but it didn't work.

I have found variations on the theme, but they aren't as effective. I'm not sure that there is a solution, but if I can get the code to work in Microsoft browsers, that would be preferable.



Edited by babyboomer
content modifications
Link to comment
Share on other sites

I've had a look through and its the variations on handling between `color`, `text-shadow` and  `background-clip`

I noticed that some browsers handle their styling groupings differently. Its illustrated clearly with the discrepancy between Chrome, Edge, and Internet Explorer.

Internet Explorer doesn't obey `background-clip: text`. Hence you can't see the text at all.

Take a peek at https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip to check for compatibility.

Edge groups its opacity for its `text-shadow` with that of its normal `color` hence when you use `transparent` it makes the shadow transparent also. It does however obey `background-clip` so you can still see the text.

Chrome seems to keep all of them separate with none affecting the others.


If you wish to support these browsers you might want to look into browser specific styling.

Edited by Funce
Link to comment
Share on other sites

Thank you, Funce.

Ideally I'd like to implement browser-specific styling. What little research I've done seems to indicate that browser detection is not an exact science. While waiting for a perfect solution, however, I'm willing to implement whatever is the current best practice. I looked at Polyfills, but didn't find anything applicable. Perhaps someone has authored a script that would do the job. A point in the right direction would be greatly appreciated.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...