CODEWITHSUNDEEP
csssafari
Starcat
Starcat

Reputation: 691

Text-Shadow in Safari getting cut off/not rendering beyond element border

As the title says, I have a text shadow with something along the lines of: 

body { background: white; }

h1 { 
    color: black;
    text-shadow: 100px 100px 10px black;
}

Text-shadow being cut off at element border In the Safari browser, the shadow gets clipped/not rendered beyond the edge of the element border.

What's stranger is when I trigger a body-background color animation effect (something cheesy that transitions the color from white to black), it seems to render properly beyond the element border for the short time during the transition. Once the transition ends, however, the shadow is cut off again at the border.

Upvotes: 3

Views: 2302

Answers (1)

Starcat
Starcat

Reputation: 691

If it's visible during transform, add -webkit-transform: translateZ(0); to it. Should work. Are you sure the element that cuts it doesn't have overflow:hidden, though? Another thought: is it possible that the element that cuts the shadow is 3d-tranformed? If it is, that's the cause. It's acting as viewport for all children. If none of the above works, I can't help you without a Minimal, Complete, and Verifiable example. Reproduce the bug here. – Andrei Gheorghiu Apr 19 '17 at 13:13 1

Solution

-webkit-transform: translateZ(0); along with explicitly inlining display: block; (didn't seem to work if it was in my .css file) fixed this for me. Thanks for the suggestion! Sorry that I didn't provide more code as an example, but the post might have grown too long. Safari feels like one jungle of a browser sometimes... – Starcat Apr 20 '17 at 0:03

Upvotes: 4

Related Questions