Fixed Wrapped Username with Profile Banner breaks "Stroke"

CmptrWz

Member
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):
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.
 
Was just about to report the same issue. To illustrate what if going on, the stroke isn't wrapping, while the normal part of the username is.

1631234034513.webp
 
Thank you for reporting this issue, it has now been resolved. We are aiming to include any changes that have been made in a future XF release (2.2.7).

Change log:
Use text-shadow to give a stroke effect to usernames whilst avoiding a wrapping issue
There may be a delay before changes are rolled out to the XenForo Community.
 
Most likely you guys covered it all, but just ran into the same thing with the username change indicator icon next to the username. Hopefully .memberHeader-nameChangeIndicator got switched to the text-shadow method as well.
 
Top Bottom