Hello, I am having a problem with the appearance of the checkout form. In particular the first letter of a selected country is chopped off as shown in the image attached below:
this is the offending element:
styling is laid out in this file:
…
@supports (-moz-appearance:meterbar) {
.lR9fE {
text-indent:-2px
}
}
This is with the craft theme installed, other themes are the same.
Also the admin theme settings page for checkout looks fine from there.
Viewed from firefox 107.0.1 (64-bit) on a desktop linux with various development packages, extra fonts etc.
Since the store is a basic account, there is no access to checkout theme css. For instance, this has no effect:
/* does not style checkout page on basic plan */
select[name=“countryCode”]{ text-indent:0 !important; }
select[name=“zone”]{ text-indent:0 !important; }
(but does the trick when inserted manually into the rendered checkout page)
The odd thing is this is not a meterbar element, and according to w3c, “It’s an experimental technology.”
What’s more, meterbar is not even a “standard” experimental value:
https://www.w3docs.com/learn-css/css-appearance-property.html
The -moz-appearance property is used in Gecko (Firefox) to show an element using platform-native styling based on the operating system’s theme.
If this property is used on websites, it should be tested cautiously. The implementation of the appearance property can be quite different especially in older browsers. But in the newer browsers, there are only small differences.
“meterbar” value appears to be deprecated in favor of “meter” or the element perhaps.
https://developer.mozilla.org/en-US/docs/Web/CSS/appearance:
Before standardization this property allowed simple elements to be shown as widgets, such as buttons or check boxes. It was considered a misfeature and authors are encouraged to use only standard keywords now.
Note: If you wish to use this property on websites, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies. In older browsers, even the keyword none does not have the same effect on all form elements across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.
Non-standard keywords
The following values may be operational on historical browser versions using -moz-appearance or -webkit-appearance prefix, but not on the standard appearance property.
| meterbar | Firefox | Use meter instead. |
|---|
Anyone know of a way to fix this? An overlooked setting to disable platform-native styling may be acceptable.
In any case, it looks terrible on a recent firefox. Can anyone confirm this?
