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

Share this post

Link to post
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

Share this post

Link to post
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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...