Kevin Powell - Community•2y ago

Glowing font problem on Safari

Hi guys, I created a landing page for a client. Designer prepared a views in figma with glowing header effect. I copied values from figma and paste into my code but I have a strange problem on iphones with safari browser. Gloving efect achieved with this code:

.glowing-header {

  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: .2rem;
  -webkit-text-stroke-color: white;

  text-shadow: 0 0 64.5996px #9950E2,
  0 0 36.9141px #9950E2,
  0 0 21.5332px #9950E2,
  0 0 10.7666px #9950E2,
  0 0 3.07617px #9950E2,
  3px 1px 1px #6D2AB0;
}

.glowing-header {

  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: .2rem;
  -webkit-text-stroke-color: white;

  text-shadow: 0 0 64.5996px #9950E2,
  0 0 36.9141px #9950E2,
  0 0 21.5332px #9950E2,
  0 0 10.7666px #9950E2,
  0 0 3.07617px #9950E2,
  3px 1px 1px #6D2AB0;
}

Normally it looks like in first screen but on iphones look like this:

3 Replies

Kevin Powell•2y ago

I mean, it's kind of cool... I can confirm that I can recreate the issue... but I have no idea what's causing it. Turning off the text-stroke-width fixes the issue, in that the glow is on all the letters... For some reason, when that's used, all the shadows stack on top of each other on the last character of each line, which is super strange.... plus they seem to also be inset glows or something on the others... i donno. Looked quickly and I don't see any bug reports on this, might be worth filing a bug report https://bugs.webkit.org/

KramarSeniorOP•2y ago

Sorry for the deal, indeed it didn't work, I managed to fix it with this:

 color: rgb(92,61,133);
  text-shadow: -2px 0 2px white, 0 2px 2px white, 2px 0 2px white, 0 -2px 2px white, 0px 0px 64.5996px #9950E2, 0px 0px 36.9141px #9950E2, 0px 0px 21.5332px #9950E2, 0px 0px 10.7666px #9950E2, 0px 0px 3.07617px #9950E2, 3px 1px 1px #6D2AB0;

 color: rgb(92,61,133);
  text-shadow: -2px 0 2px white, 0 2px 2px white, 2px 0 2px white, 0 -2px 2px white, 0px 0px 64.5996px #9950E2, 0px 0px 36.9141px #9950E2, 0px 0px 21.5332px #9950E2, 0px 0px 10.7666px #9950E2, 0px 0px 3.07617px #9950E2, 3px 1px 1px #6D2AB0;

Kevin Powell•2y ago

ah, that's so annoying, but glad it worked

Gaming

Programming

Glowing font problem on Safari