CODEWITHSUNDEEP
google-chromecolorscss-transformscss
bowens
bowens

Reputation: 65

Chrome issue with text-shadow color on transformed paragraphs

For whatever reason, when I apply a CSS transform to a paragraph that already has a text-shadow applied, the color of the text-shadow becomes the color of the paragraph, regardless of the color specified for text-shadow in my css. This issue only seems to happen on Chrome, it works fine in firefox. The example website below should demonstrate this.

<html>
    <head>
        <style type="text/css">
        p
        {
            text-shadow: 10px 10px #000000;
            color:#FF0000;
            -webkit-transform:rotateY(10deg);
        }
        </style>
    </head>
    <body>
        <p>Hello world!  Chrome will work now?</p>
    </body>
</html>

Is there any way to apply a rotation to a paragraph and have it render the text-shadow correctly?

Upvotes: 1

Views: 350

Answers (1)

bowens
bowens

Reputation: 65

To answer my own question in hopes that it saves someone else time, after some tinkering it seems that adding a blur, either positive or negative, to the text shadow fixed this issue. Replacing text-shadow: 10px 10px #000000; with text-shadow: 10px 10px -1px #000000; displays the text shadow at the appropriate color.

Upvotes: 3

Related Questions