[SOLVED] Iframe text input not visible until scroll or click

Ionic Framework ionic-v3
1

I’m embedding an ecommerce site into my Ionic 2 app and it works well overall, minus this issue with input fields. Here’s a capture of the issue: https://www.dropbox.com/s/5lsubmg26dciihm/sample.mov?dl=0

I’ve tried disabling -webkit-user-select: none; from the CSS, as well as the JS workaround suggested on this Stack Overflow post. The In-app-browser plugin has the same issue.

Any suggestions on how to fix this issue, or a better way to embed a shop into Ionic?

2

I’ve tried updating ionic-plugin-keyboard as well as using the wkwebview-engine plugin but neither worked. Any suggestions appreciated!

3

For anyone facing a similar issue, it was CSS causing the problem.

This is what I had added to fix a bug where it jumped to the top of the page:

html, body {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

taking out the last line fixed the issue. This is all I needed:

html, body {
height: 100%;
overflow: auto;
}