API error returned 0 width, assuming UIViewNoIntrinsicMetric

Ionic Framework ionic-v3
1

I’m running Ionic 3 on iPhone 7 plus iOS 11, and have a few input fields. When I tap into any of the input fields, my Xcode console outputs this error:

API error: <_UIKBCompatInputView: 0x155eac820; frame = (0 0; 0 0); layer = <CALayer: 0x1c003a6c0>> returned 0 width, assuming UIViewNoIntrinsicMetric

Sometime the app runs ok and sometimes it freezes for 10 seconds and I’m unable to click anywhere as it becomes unresponsive. Any ideas what might be causing this behaviour?

1 Like
2

Finally you solve this error? I’m experience the same error too

3

Any updated?

Thanks!

4

Yes by upgrading to MKWebView, this is the new standard, no way around this (rather painful) update.

5

Hi, thanks. :slight_smile:
Is this a complex process? or need I run a few commands?

6

It’s simple, just go to Ionic and check instructions. It’s literally 2 CLI commands. But, if you use some special functionality (like phone storage), you’ll need to slightly update your code. It’s all there in the instructions, and even if you just upgrade, you’ll get a few errors during build which will show u which code to update.

7

Hi Dimitri,
Can you maybe provide a link to where I can upgrade to MKWebView?
I don’t seem to find it anywhere.

Thank you.

8

Hi, the latest ionic version using MKWebView as default, but this problem still exists, any sugestions? Thank u

9

I saw this in the docs. https://ionicframework.com/docs/wkwebview/

Problem is, even after I do this, I still get this error :frowning: Anyone else still experiencing this?

10

Yes, I performed the step on that doc, still got the errors.Then I created a new ionic project, moved my /src to the new project, added several packages by hand to the new project I thought that fixed for a while until:

API error: <_UIKBCompatInputView: 0x137f43b50; frame = (0 0; 0 0); layer = <CALayer: 0x1d022ba20>> returned 0 width, assuming UIViewNoIntrinsicMetric
[Snapshotting] Snapshotting a view (0x137f48fa0, UIInputSetHostView) that has not been rendered at least once requires afterScreenUpdates:YES.

12

I did exactly the same as @jbctw and I have the same error. It occurs when I show the keyboard for the first time in my app. Either touching an input or using setFocus(). My app was ready to release :(. How to solve this? Thanks for helping.

13

I experienced the same thing and it took me way too long to fix it. I was able to fix the issue by delaying execution of the js in my first controller until after the device was ready. i.e.

$ionicPlatform.ready(function(){init();});

My theory is that updating the DOM by binding a value to it prior to the device being ready was causing the error. It makes some sense, as if the device isn’t ready and returning a width of 0, you aren’t ready to render the DOM and doing so could cause an error. This makes even more sense if you are using the viewport meta tag and setting width to device-width as most people added to accommodate the iPhone X.

14

I’m facing the same problem since this morning. 2 days ago, my app worked like a charm (ios 12.0.0, ionic 3), and this morning i receive ios 12.0.1 update and since then, each time i show the keyboard, the app is freezing and the console throw me this error :

API error: <_UIKBCompatInputView: 0x1066348d0; frame = (0 0; 0 0); layer = <CALayer: 0x281e51880>> returned 0 width, assuming UIViewNoIntrinsicMetric

i already use platform.ready().then(...) in this, not solve the issue…

any idea ?

15

Hi! Im facing the same issue. :frowning:
The strange part is that it happen just in a specific form.

Could you fix this issue?
Tks!

16

Nope still KO on iphone 7 ios 12.0.1 but it works both on iphone 6 ios 10.3.3 and iphone 5 ios 11.

:confused:

17

Below the code that Im using and worked for me.

ngAfterViewInit() {
    
    this.keyboard.onKeyboardShow().subscribe(event => {
      this.elementRef.nativeElement.style.marginBottom = event.keyboardHeight + 'px';
     
    });
    this.keyboard.onKeyboardHide().subscribe(event => {
      this.elementRef.nativeElement.style.marginBottom = '0px';
    });
  }

Also Im using an ion-textarea in the form.

18

Do you have to implement this for each input field of each screen ? I mean, what this.elementRef refers to ?

Thanks

19

Im so sorry for the incomplete code.

Use this on your constructor method.

private elementRef: ElementRef

It comes from @angular/core.
I had this problem in a particular form where I have a chat firebase based. So I put this code just in one form.

20

Ok thanks.

It’s a little better because i can now “use” the app but now all the fields (button, switch, input…) have their active area 80px above.

I’m trying to fix it, but it’s not a long term solution i think…

21

Another detail:

IonicModule.forRoot(MyApp, 
    {
      platforms:{
          ios:{
            scrollAssist: false,
            autoFocusAssist: false
          }
      }
    }),

Put this piece of code on app.module.

1 Like