Okay
  Public Ticket #2129369
"Register" box appearing behind onscreen keyboard on mobile devices
Closed

Comments

  •  2
    Kevin started the conversation

    Hi.  I opened another ticket about this 3 weeks ago.  2 weeks ago I replied to your response and I have followed up with you a couple of times over the last week but I seem to be getting no further response from you.

    I have been advised to try opening a new ticket in case something has happened to the previous ticket.

    As previously stated:

    On mobile devices, in the WooCommerce checkout, when checking out as a guest, if you click on any text field in the checkout page to fill out details, when the devices on-screen keyboard pops up, The Fox theme's "Register" box is revealing and peaking up a bit from behind the on-screen keyboard.

    We have definitely not made any customisations that would cause this issue. I can confirm this by the fact that we have tested this issue with another WooCommerce site that we have which is using the same theme but which was set up by our client and not by us, so they would not have made any kind of customisations that we might have made.

    We have added quite a lot of custom CSS to the theme's "Custom CSS" area in the Theme Options, but as a test we completely removed all of our custom CSS to see if that fixed the issue and it didn't.  We have made no changes to the Child Theme at all.

    - The process to replicate the issue is:

    - Add product to Cart

    - Go to the Cart page

    - Proceed to the Checkout page

    - a.) If, under "Existing customer", you tab into either text field ("Username or email" or "Password"), it will bring up the phone's on-screen keyboard, and the "Register" box peaks up behind it.

    OR:

    - b.) If you choose to Checkout as Guest, and then click into any field that brings up the phone's on-screen keyboard, the "Register" box will peak up behind the keyboard.

    We find it is more or less obviously depending on what type of phone you're using.  On most Android devices we've tried, it's showing the whole top of the box (about 20px or so) and it's dropshadow.  On some iPhone's however, it seems to appear just as a line.

    The two sites in question are:

    https://www.fangandfur.co.nz - This is the site we original submitted the other ticket about as the client noticed it and wants it fixed asap.

    https://www.millsbros.co.nz - This is the other site which has been built with the same theme on which I have tested and found the same issue to exist.

    I have attached 4 screenshots from my Samsung Galaxy S8+ showing the issue:

    • "fangandfur01.jpg" shows the issue on the "Fang & Fur" site when signing in as an existing customer.
    • "fangandfur02.jpg" shows the issue on the "Fang & Fur" site when checking out as guest.
    • "millsbros01.jpg" shows the issue on the "Mills Bros" site when signing in as an existing customer.
    • "millsbros02.jpg" shows the issue on the "Mills Bros" site when checking out as guest.


  •  2
    Kevin replied

    Hi.  I need a response to this urgently please.  Our client is becoming increasingly upset with the continuation of this issue, is claiming the site to be "unfinished" because of it!

  •  2
    Kevin replied

    Ok, I couldn't wait on this any longer because the client was tearing strips off us and refusing to pay her bill because of it (which I think is ridiculous because it really is such a minor issue which doesn't actually effect the functionality of the site at all!  Sheesh!).

    Anyway, I managed to find a work-around which seems to work, which perhaps you could implement as part of your next update:  At the moment, when the ".create-account" div is hidden, you have set "top:125%;".  Now, the problem seems to be that it's not hiding properly for some reason (particularly in Chrome).  I discovered the div was actually also peaking up above the "Inspector" panel in Chrome on Desktop, and the further up I dragged the "Inspector" panel, more of the ".create-account" box would appear.
    The solution I've managed to apply is, in "TheFox" > "Styling Options", in the "Custom CSS" box I entered, ".create-account{top:200%;}".  So now, the div is still technically "visible" in Chrome, but it's pushed further down so it's too far down to be able to peak up above the mobile device's on-screen keyboard, but still appears and slides up nicely when you click/tap "Create Account".

    So yeah, all you should need to do is change your "top:125%" to "top:200%".