Checkout Fields using the Safari Web Browser

[tylerstannard]

Hi, I have attached a picture to show an error I’ve been having, in the Nota theme on the checkout page using a Safari web browser. When completing checkout and the browser has auto-fill turned on (which most of our customers do), then the input fields are partially blocked or obscured. I have tested with and without auto-fill enabled in the Safari settings and can confirm that it is related.

This is starting to affect our purchase completions, any help/advice would be appreciated! Thanks!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

I have fixed this for the next update. Please add this to Theme Options => Custom CSS:

.browser-safari .woocommerce form .form-row input.input-text {
    padding: 0px 15px 0px 15px;
    height: 44px;
    line-height: 44px;
}

[tylerstannard]

Hi David, thanks that seemed to do the trick! I did notice, cursor is very large now (of course), and also, the pre-filled field text i.e. “Zip code here” seems pushed to the top (vertically) of the field area.

[David Martin – Support]

Ah, sorry – this will do it.

.browser-safari .woocommerce form .form-row input.input-text {
    padding: 7px 15px 7px 7px;
    height: 44px;
    line-height: 22px;
}

Can you screenshot no.2?

Thanks.

[tylerstannard]

I put the new CSS in, and screenshot below. I pointed out the large cursor, and also the elevated text. Thanks!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

hmm that’s odd, I see this:

What OS are you using? I’m on Mac + Safari

[tylerstannard]

I just tried now, and everything looks fine, maybe it was a cache issue. Thanks for your help!

[David Martin – Support]

Ah glad to hear it’s working now.

Thanks.