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.png

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

1636482044430.png

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. 🤷🏻‍♂️
 

XF Bug Bot

XenForo bug fixer bot
Staff member
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