Weird bug(?): Address fields hidden and disabled in Firefox during checkout by external css class

[jaybee21]

Hi everyone,

yesterday I activated as a Plus user the checkout.liquid layout in order to modify the checkout page slightly. That works and it is activated successfully. However, since then (or at least I have not noticed that issue before this activation) the checkout process presents a weird behaviour in Firefox:

After adding a product to the cart and continue to checkout, the normal information page shows up, asking for the e-mail address. However: In Firefox, the address fields are HIDDEN!!!! Only the e-mail field and the country selection drop-down are visible, everything in between, name, address or zip, is hidden. Of course, it is not possible to proceed to the shipping page without any address information -> it is a deadlock in Firefox without even showing an error message for the users.

The weird thing is: In Chrome, Opera or with my mobile browser, that issues does NOT exist and to make it even weirder, sometimes it works in Firefox – without any single change in the shop settings or code. But it is not possible to say when it works occasionally in Firefox.

Some deeper investigation revealed this: When the address fields are hidden, a CSS class .hidden from the url https://cdn.shopify.com/app/services/.../assets/.../checkout_stylesheet/v2-ltr-2019-01-21-.... causes the problem as it adds “display: none !important;” to

<div class="field--half field field--required hidden" data-address-field="first_name">
	<div class="field__input-wrapper"><label class="field__label field__label--visible" for="checkout_shipping_address_first_name"> First name </label>
		<input placeholder="First name" autocomplete="shipping given-name" data-trekkie-id="shipping_firstname_field" data-backup="first_name" class="field__input" aria-required="true" size="30" type="text" name="checkout[shipping_address][first_name]" id="checkout_shipping_address_first_name" disabled="disabled" hidden="hidden">
	</div>
</div>

Also, the attribute "disabled="disabled" is added to the inputs, not allowing any input even though the fields would be visible.

What is happening here and why? Removing the .hidden class with the code inspector in Firefox reveals the address fields instantly. And removing the “disabled” attribute from the inputs allows me to type in a name and address as intended, including autocomplete. Only then I can proceed with the checkout.

So my questions are:

1. Where does this external class come from? I assume it is from Shopify.
2. Why does it exist and is loaded? (as address fields are mandatory, that makes no sense for me)
3. Why is that class only loaded in Firefox and only in 80%-90% of the cases?
4. Why is the attribute disabled added to the inputs, preventing any inputs even though the fields would be visible?

That is super weird and overriding the attributes with jquery works, but obviously cannot be the “solution”… Any help is appreciated :-)

[jaybee21]

Ok, a brief update: The same issues appears with Chrome as my latest tests reveal!

I have deleted all my own CSS-code, but still, the address fields remain hidden and disabled :-( I have to put somehow some JQuery in temporarily, but this external css-class is really strange and prevents all orders!

[cgm_]

Hi!,

I have the same problem but whit a different field, also in the checkout, it´s the same with chrome, firefox or edge

Did you find out what was the problem?

Thanks