Fixed <meter> background-color

digitalpoint

Well-known member
Affected version
2.2.7
TL;DR
I think .m-meterVariantEmpty(); should be removed from meter.meterBar since it's already in the child pseudo-element, meter.meterBar::-webkit-meter-bar within the core_meter_bar.less template.



Look at the <meter> element that XenForo uses for things like password strength:

1636481988577.webp

See the background color bleeding out of the meter? Make the <meter> element bigger to see it larger:

1636482044430.webp

I assume the intent is for the background color to be applied to the meter itself, not the bounding box of the meter. If that's the case, background-color isn't what you use, it's currently done with browser-specific prefixes/pseudo-elements like so:
CSS:
meter::-webkit-meter-bar {
    background: #efefef;
}
meter::-moz-meter-bar {
    background: #efefef;
}
...which XenForo is already doing within the core_meter_bar.less template.

Looks to me like .m-meterVariantEmpty(); should be removed from meter.meterBar since it's already in the child pseudo-element, meter.meterBar::-webkit-meter-bar?

Or maybe the goal was to set the background of the surrounding area, but looks weird to me. 🤷🏻‍♂️
 
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.8).

Change log:
Fix password strength meter background color bleed.
There may be a delay before changes are rolled out to the XenForo Community.
 
Top Bottom