On iOS 11 (chrome and safari) the cursor jumps out of a form field in a tiny modal

[arsanjea]

***This probably needs to be moved to Semantic-Org/Semantic-UI ***

Steps

Create a tiny form with two fields in a tiny modal
https://codesandbox.io/s/x93kj2pn3p

Expected Result

User can edit the field and the cursor is visible within the field (works on desktop)

Actual Result

On a phone, the field cursor is displayed outside of the field input field (you have to try it form an actual phone, resizing chrome or safari to fit the phone's screen dimensions won't work). Also, this issue doesn't seem to occur as often on simulators (however, I always get it on my iphone and my coworkers' iphones).
This might be related to https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8

Workaround

Hide components behind modal to ensure body size < modal height

Version

0.75.1

Testcase

[brianespinosa]

Hi @arsanjea have you tried putting your Button inside a Modal.Actions component instead of inside the Modal.Content? Structurally with the markup/styles I think this is causing some of your issues.

  <Modal.Actions>
    <Button type="submit" content="I'm in!" color="orange" />
  </Modal.Actions>

This should be the sibling directly after Modal.Content

[levithomason]

Hm, seems the blog post you've linked shows the root issue. Being that this is both a CSS issue and an iOS issue, I'll close this for now. We don't have control over either of those here.

***This probably needs to be moved to Semantic-Org/Semantic-UI ***

Yes sir 😉

[karak]

@levithomason
Where is the equivalent issue on Semantic-Org/Semantic-UI?
Not found at least in searching https://github.com/Semantic-Org/Semantic-UI/search?utf8=%E2%9C%93&q=modal+ios&type=Issues
Is this fixed in the framework side?

[brianespinosa]

@karak I have not looked in SUI for a similar issue for this, but this is actually a bug in Mobile Safari in iOS 11.2 which means unfortunately that we are waiting for Apple to fix it. Here's a link to the relevant Webkit bug report for anyone else landing here: https://bugs.webkit.org/show_bug.cgi?id=176896

The good news is that from what I've been seeing, people are verifying that this is resolved in the iOS 11.3 release, which is still currently in beta. We're basically waiting for that to come out. There are ways to hack around this but they are pretty messy, and they will likely not display the way you want after this is fixed.