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:
That is super weird and overriding the attributes with jquery works, but obviously cannot be the “solution”… Any help is appreciated :-)