Variation selector display issues on the front end

[jarekmorawski]

First reported here: https://github.com/woocommerce/woocommerce/issues/42299

There are a few issues with how the variation selector block is shown on the front-end. Tested in Chrome and Safari on MacOS.

The dropdown should use the same appearance settings (height, padding, border size and color) as the stepper and the quantity input field.

On a variable product page, the right padding of the dropdown button is missing.

The dropdown is unstyled in Safari.

[gigitux]

Regarding the Safari issue, I did an investigation, and unfortnaly I discovered that if the default WebKit style is disabled with webkit-appearance:none, the arrow will not be visible anymore:

This is a common issue:

• https://github.com/alphagov/govuk-frontend/issues/3520
• https://www.sitepoint.com/community/t/select-arrow-no-showing-webkit-appearance-none/114625/1

Adding an arrow requires some DOM/CSS changes. I'm going to put this issue on hold and revisit it when we have the capacity to work on this block.

[tomxygen]

Does it mean that for now the variation picker will stay as is in Safari?

[gigitux]

Does it mean that for now the variation picker will stay as is in Safari?

Yes!

[octaedro]

Hi @j111q,

I'm working on this issue. I fixed the selector styles in Chrome but I was wondering what is expected for the chevron styles.

Initially, it looks correct to me, but I wanted to confirm with you if we should modify anything regarding its alignment.

[j111q]

Oh got it. I think, following the quantity picker design as Jarek mentioned above, we'd also need padding on the right on the chevron. I believe it's 12px? So something like this:

Let me know if that works 😁