1

I have a strange problem with text-shadow on a large title in Safari. There seem to be pixelated boxes in the shadow on Safari, whilst on Chrome it looks great. Does anyone know why this might happen? I couldn't find anything online about this issue.

CSS for the element (I put it all in just in case there is something relevant):

.title {
    min-width: 100vw;
    min-height: 100vh;
    font-size: calc(50px + 5vmin);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    text-shadow: 0px 0px 60px black;
    user-select: none;
}

Chrome: Chrome rendering

Safari: Safari rendering

Improve this question
5
  • Safari is just terrible. Sometimes we've had to use a 3d transform to "trick" Safari into using hardware acceleration to fix/address odd rendering issues. See if adding something like transform: translate3d(0,0,0); fixes it. Commented Jan 15, 2024 at 7:28
  • 2
    Try something like filter: drop-shadow(0px 0px 60px black); instead of text-shadow. The result might not be exactly the same but it does get rid of the pixelated artifact. Commented Jan 15, 2024 at 7:40
  • @DrewReese that one didn't work unfortunately, but thanks for the reply! Commented Jan 15, 2024 at 11:12
  • 1
    @HaoWu this was perfect! Looks great on both browsers now. I've never heard of filter but will keep it in mind going forward. Thanks so much! Commented Jan 15, 2024 at 11:12
  • That's the joy of CSS. Sometimes there's 100 ways to do something, sometimes only exactly 1, and sometimes that 1 thing is different in each browser. Just keep filling up your CSS "bag-O-tricks". Commented Jan 15, 2024 at 17:59
Related questions
767
CSS text-overflow: ellipsis; not working?
575
CSS Image size, how to fill, but not stretch?
0
Safari won't use text-align justify using @font-face
Load 3 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.