XF 2.2 Username Border Issue on Mobile

[Sanctum Staff]

So this is a trick I figured out a few years ago. For our staff usernames, which need to have a consistent colour across all or themes, I added a simple border that improves contrast and prevents them blending in.

Like so:

Spoiler

However, for some reason on mobile, this outline has completely broken:

Spoiler

(Note the many areas where the outline crosses over and into the various parts of the letter)

More annoyingly, this issue is not entirely consistent—it happens in some areas of the site, but not (for example) on user pages.

The code I am using to achieve the outline is:

For our admin names (the purple one)

-webkit-text-stroke: 0.5px black;
color:#69068d;
font-weight: bold;

For our donors (red and gold)

-webkit-text-stroke: 0.65px #800000;
color:#ccac00;

So the two questions:

1. Is there something really obvious in this code I am missing that breaks it on mobile

2. Is there some other way to accomplish the same thing that might work better?

 

[Paul B]

What is the mobile OS/browser?

It's possibly one which doesn't support that.

 

[Sanctum Staff]

So far I've confirmed the issue on mobile for Chrome, Edge and Firefox, from multiple users with different devices. There's no obvious difference between any of them. I haven't been able to check Safari or IOS device yet.

 

[Paul B]

Can you post a link.

 

[Sanctum Staff]

Here's our site link, the issue is mot visible on mobile in the staff online now usernames: https://writerssanctum.com

 

[Paul B]

It looks like mobile OS/browsers don't support that CSS.

You'll need an alternative approach.

 

[Sanctum Staff]

It seems to be a known bug related to variable fonts https://stackoverflow.com/questions/69253420/text-stroke-webkit-text-stroke-css-problem

I did find one possible solution, but the styling it uses does not seem to be able to work in the username CSS, at least not as written there:

.fixed {
  position: relative;
  /* We need double the stroke width because half of it gets covered up */
  -webkit-text-stroke: 4px black;
}
/* Place the second copy of the text over top of the first */
.fixed span {
  position: absolute;
  left: 0;
  -webkit-text-stroke: 0;
  pointer-events: none;
}