JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id=background></iframe>
<iframe id=foreground></iframe>
<iframe id=foreground2></iframe>

CSS

iframe {
    position:absolute;
}
#background {
    border: solid 3px red;
    z-index:1;
    width: 20em;
    height: 20em;
}
#foreground, #foreground2 {
    border: solid 2px yellow;
    z-index:2;
    top: 15em;
    height: 5em;
}
#foreground2 {
    top: 22em;
}

JavaScript

document.getElementById("background").contentDocument.write("<p>Despite the unfortunate (required, in my instance) iframe's, I don't see why the iPad keyboard behaves so erratically in the input fields. One can't even position the cursor properly!</p><p>In my instance, I am actually trading z-indices between background and foreground iframes regularly, and can disable the event capture in the background, but that seems crude. Is that the only solution?</p>");
document.getElementById("foreground").contentDocument.write("<input type='text' value='text'/><input type='text'/>");
document.getElementById("foreground2").contentDocument.write("<input type='text' value='text'/><input type='text'/>");

document.getElementById("background").addEventListener("touchstart", function() {
    console.log("touch");
});