Input type="text" does not work in frame on iOS

[stefek99]

Video: https://www.youtube.com/watch?v=pj1YmMvzAWc (1m 24s)

Code: http://plnkr.co/edit/uIC1MxxqmS6s5d6gLwEo?p=preview

Preview: http://run.plnkr.co/7eteB3OaVmNDdZt0/

<iframe src="iframed-pure.html" height="100px"></iframe>
<iframe src="iframed-ionic.html" height=50% width=100%></iframe>

Pure iframe works:

<input type="text">

Ionic iframe doesn't... But only on iOS (Safari and Chrome). On desktop, Android, Windows Phone it works.

Any ideas?

[ericwooley]

I tried the plunker in the simulator.

I had problems focusing on the first input (without the search icon), however after clicking about several times I found that sometimes I could type into it.

The second input, with the search bar, I was not able to type into at all.

I created a fork of your plunker http://plnkr.co/edit/cVnE8vjUBuAGW7ghKC0S?p=preview

and was not able to type into the input fields, but was able to focus on them.

So this does seem like an ionic bug to me, however, I would suggest you use a directive or ng-include instead of an iframe if at all possible.

[perrygovier]

Thanks for these examples, we'll look in to it.

[stefek99]

The whole reason of having an iframe was to present a mobile-sized app on a desktop.

iframe approach was no good and eventually ended up using a few classes from your competetitor: https://github.com/twbs/ratchet/blob/master/docs/assets/css/docs.css

  .device {
    position: relative;
    top: 50px;
    display: block;
    width: 395px;
    height: 813px;
    margin-left: -20px;
    font-family: "Helvetica Neue", sans-serif;
    background-image: url("device-sprite.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 300%;
    -webkit-transition: background-image .1s linear;
       -moz-transition: background-image .1s linear;
            transition: background-image .1s linear;
  }

  .device .device-content {
    position: absolute;
    top: 117px;
    left: 37px;
    width: 321px;
    height: 569px;
    overflow: hidden;
    font-size: 17px;
    line-height: 21px;
    background-color: #fff;
  }

(I think that iframe events still remain relevant but not critical to what I wanted to achieve)

[perrygovier]

A little more detail. Since we're using JS scrolling and click helpers, iframes are problematic. If we address the issue, we'll need to set up a way for these listeners to be "injected" in to child instances of a DOM.

[perrygovier]

I'm unable to access the plunkr anymore, they must have removed it. Is anyone able to reproduce this still? We've introduced a handful of tap/click fixes, that might have helped this.

[ericwooley]

http://embed.plnkr.co/cVnE8vjUBuAGW7ghKC0S/preview

This plunkr worked for me just now. I can copy paste one for you if you need.

[ericwooley]

I checked out the plunker again, it seems to work fine now. It was definitely broken before. Did the Beta6 version get updated?