- Affected version
- 2.2.6
User profiles with banners have a "stroke" around the username, presumably because it helps isolate the username from background mess in the banner image.
Except that they don't have a stroke on the username, they have a copy of the username with a stroke because CSS text strokes look horrible.
That copy is set to not wrap, because otherwise it seems to detect the original and wrap immediately. For short usernames this is fine.
For long usernames, more easily seen on mobile or in the member tooltip popup, when the username wraps the "stroke copy" just keeps going without wrapping. This leads to the unwrapped portions being black text sitting on top of everything, including some of the member controls that likely made it wrap in the first place.
member.less and member_tooltip.less have this code for the .is-stroked usernames to accomplish the current behavior (there's an extra Tooltip in the variable in member_tooltip.less, otherwise it's the same):
Replacing that entire block with this uses the more compatible text-shadow to achieve basically the same effect, but allows for the username to wrap without breaking the "stroke" (and won't cause any "screen reader sees the username twice" dances, though I don't know if that was a problem with the current version):
A full fix likely pulls the 0 #000 information into a variable like @_member-textStroke has before or something similar to make it easy to tweak the color if desired, but this only "looks right" with a single pixel "stroke". It starts having odd gaps if you try to make it 2+ pixels.
Except that they don't have a stroke on the username, they have a copy of the username with a stroke because CSS text strokes look horrible.
That copy is set to not wrap, because otherwise it seems to detect the original and wrap immediately. For short usernames this is fine.
For long usernames, more easily seen on mobile or in the member tooltip popup, when the username wraps the "stroke copy" just keeps going without wrapping. This leads to the unwrapped portions being black text sitting on top of everything, including some of the member controls that likely made it wrap in the first place.
member.less and member_tooltip.less have this code for the .is-stroked usernames to accomplish the current behavior (there's an extra Tooltip in the variable in member_tooltip.less, otherwise it's the same):
Less:
&:before
{
content: attr(data-stroke);
position: absolute;
white-space: nowrap;
color: #000;
-webkit-text-stroke: @_member-textStroke;
}Replacing that entire block with this uses the more compatible text-shadow to achieve basically the same effect, but allows for the username to wrap without breaking the "stroke" (and won't cause any "screen reader sees the username twice" dances, though I don't know if that was a problem with the current version):
Less:
// This does the _member-textStroke effective dance without relying on webkit flags
// It also doesn't break if the user's name wraps!
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;A full fix likely pulls the 0 #000 information into a variable like @_member-textStroke has before or something similar to make it easy to tweak the color if desired, but this only "looks right" with a single pixel "stroke". It starts having odd gaps if you try to make it 2+ pixels.
