search

impress-org / givewp

GiveWP - The #1 Donation Plugin for WordPress. Easily accept donations and fundraise using your WordPress website.
https://givewp.com/
GNU General Public License v3.0
340 stars 191 forks source link

Inputs don't focus the cursor correctly on iPhone #2239

Closed mathetos closed 6 years ago

mathetos commented 6 years ago

Issue Overview

Customer reported this here: https://secure.helpscout.net/conversation/455703472/11205?folderId=672194

Using in iPhone, while the form is open in a modal, touch into a text input and the cursor will jump down and outside of the input area.

Can be tested live here: http://php7.mattcromwell.com/donations/basic-donation-form/

Expected Behavior

The cursor should always stay inside the input area.

Current Behavior

The cursor jumps outside the input area when focused on with an iPhone (any browser). On the customer site it consistently jumped outside the input. But on the demo site above, it jumps outside only on the first few touches, but gets better unless the page is refreshed.

Possible Solution

There seems to be some general discussion about this issue. Here's a few solutions: https://github.com/ftlabs/fastclick/issues/338

This Magnific issue also seems relevant: https://github.com/dimsemenov/Magnific-Popup/issues/505

Steps to Reproduce (for bugs)

  1. Load this page with an iPhone (any browser): http://php7.mattcromwell.com/donations/basic-donation-form/
  2. Click the donate button to open the form in the modal
  3. Click into any of the personal info fields
  4. You'll see the cursor drop down and outside of the input area.
mathetos commented 6 years ago

This may need to be tested with all payment gateways and Form Field Manager as well.

kevinwhoffman commented 6 years ago

I made a barebones example on CodePen to isolate Magnific. I was unable to recreate the issue.

One thing I noticed is that the problematic Give forms seem to zoom in when the first input is focused. When this zoom occurs, that's when the cursor jumps out of the input field. Research shows that iOS will zoom in on an input if its font-size is less than 16px, but it's not clear to me if that is related to this bug since the problem only occurs in modals.

ravinderk commented 6 years ago

@kevinwhoffman @mathetos @DevinWalker Donate now and amount field border creates thin border on there joint which is not looking good.

Original:

screen shot 2017-10-27 at 9 44 01 am

After removing right border from amount field:

screen shot 2017-10-27 at 9 45 14 am

Let me know if you guys wants to create issue for that

DevinWalker commented 6 years ago

I've looked into this and can't find a solution currently. I will continue debugging but for now I have to bump this to 1.8.17 and release 1.8.16 with other important fixes that shouldn't be held up.

Benunc commented 6 years ago

ANother customer report of this today. tagged iphone-bug in Helpscout.

DevinWalker commented 6 years ago

Debug Findings

I've determined that this is a known issue with WebKit/Safari/iOS:

  1. https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8
  2. https://bugs.webkit.org/show_bug.cgi?id=176896

"Jon Lee" says:

We haven't forgotten about this. We are aware this is an important issue and are looking into it.

Apparently the problem is present on major sites like Sony Playstation and others.

I attempted various fixes and workarounds and none work up to expectations because you can still get the cursor outside the field if you play around with it enough:

  1. https://stackoverflow.com/questions/46567233/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug
  2. https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8
  3. https://stackoverflow.com/questions/46339063/ios-11-safari-bootstrap-modal-text-area-outside-of-cursor
  4. https://github.com/fancyapps/fancybox/issues/1646 (released a hack for fix)

I have enforced a minimum of 16px for the .give-input font-size within a5786541e6291067fee96e93e82232a4103f4ae6 and that seemingly reduces some of the issue however not completely. This is the best I could do at this point until an iOS fix is rolled out.

Other places that this bug has been detected and determined to wait for the fix:

  1. https://github.com/vuejs/vue/issues/5544
  2. https://github.com/18F/web-design-standards/issues/277

Another related bug is that when scrolling the blinking cursor doesn't move along with the content: https://bugs.webkit.org/show_bug.cgi?id=138201

Support

@mathetos and @Benunc unfortunately it seems like the best solution for this is to educate and inform our customers that this is an iOS issue affecting many other platforms that Apple and WebKit are actively working to fix. We're staying on top of the bug (https://bugs.webkit.org/show_bug.cgi?id=176896) and will confirm when a fix has been released.

mathetos commented 6 years ago

@DevinWalker Thanks for digging into this so deeply. I notified the relevant customers of your findings.

dlinsen commented 3 years ago

Still experiencing this issue on iphone 11 safari.