Workaround for iOS 10-12 WebKit (Safari/Chrome) iframe focus bug

I believe I have found a fix for this frustrating little bug, and like most bugs it's a super simple fix.

All that needs to be done is to apply a the following css to the input within the iframe.

    input:hover {
        cursor: text
    }

Here's an updated example: https://codepen.io/ryanoutloud/project/full/AEKGjj

Now as to the bug itself, the focus is actually on the intended field and any entry from the keyboard will be registered properly. Once typing begins the caret jumps into proper position. The
issue I found with the ontouchstart="" solution is that it simply removes the caret from view entirely once focus is placed on a field.

Problem is resolved in my environment by adding @Ryan L's suggestion document.addEventListener('touchstart', {}); in the IFrame.

This is good as it's very simple to add and is specific to the IFrame, not affecting the container page.

Problem description: cannot 'touch' (select, edit) another form field on Safari running on iDevices (phone & pad) running iOS 12. This only happens on pages in an IFrame where the container page has added some touch events. Very obscure set of conditions that are difficult to debug.