md-input-container doesn't display text while typing on Chrome iPad

[kamarouski]

Have an issue with input controls on iPad Chrome browser (iOS 8.3).

When I select a control and start typing input highlighting disappear together with typing text. If I change focus and select the control back, typed text appears. Same if I remove all the text and start typing again.

Works fine in Safari and with Chrome on Android.

I can reproduce it not for every input. The ones where this happens are inside md-content.

The markup looks like below:

<md-content flex layout="column" md-scroll-y layout-padding ng-view>
<div ng-controller="myCtrl as vm">
    <form name="myForm" novalidate class="some-form" ng-submit="myForm.$valid && vm.save(vm.model)" ng-cloak>
        <h3>Create </h3>
        <div layout="row">
            <md-input-container flex="45">
                <label>Some Name</label>
                <input name="someName" type="text" ng-model="vm.model.someName" required/>
                <div ng-messages="myForm.someName.$error" ng-show="myForm.$submitted || myForm.someName.$touched">
                    <div ng-message="required">Some name is required.</div>
                </div>
            </md-input-container>
           ...
          </div>
     </form>
</div>
</md-content>

[mdelgadov]

About the same happens on IE 11 in small size screens... overflow bars appear on the right and the text is extremely small... this stopped happening for some time but looks we are having a regression.

[deltaepsilon]

@robertmesserle Something similar is happening to my website, Calligraphy.org. Try registering at https://www.calligraphy.org/app/register on iOS. Parts of the form disappear as soon as I focus on the email or password inputs. Safari appears to be the new IE.

[jpike88]

It basically renders any form longer than the initial page unusable. This is a critical usability bug.

It happens using WKWebView, which essentially means it happens on all iOS devices.

In the meantime I'll have to abandon use of md-inputs altogether.

[nicolasalcina]

I found something interresting in page 12 of google ;) :
https://forum.ionicframework.com/t/cant-edit-the-input-fields-edit-video/7268/28

it fixed the issue for me !
.run(['$document', '$window', function ($document, $window) { var document = $document[0]; //unwrap the document from the jquery wrapper // RMB HACK FOR IPAD NOT FOCUSING INPUTS INSIDE IFRAME document.addEventListener('click', function (event) { var hasFocus = document.hasFocus(); if (!hasFocus) $window.focus(); }); }])

[jpike88]

That's a little extreme in my opinion.

I was given a workaround in #7078 which specifically targets the fields via CSS, no javascript needed.

[sssaranya2019]

Hey could anyone help. This exists yet I tried adding flicker even. Its not working with ios 12

[Splaktar]

@sssaranya2019 this issue is closed. Please open a new issue using the issue template that includes a CodePen reproduction of the issue. Please reference this issue in your new issue.