Resize: innerWidth/innerHeight bug with iOS9

[baptistebriel]

Hello, this is not an issue directly related to bigwheel, but like 99% of the web we should have it too; did you heard that iOS9 returns double the value for window.innerWidth & window.innerHeight?

https://twitter.com/mattdesl/status/648588118040412160

Do you think we need to implement a polyfill or something for it?
I was thinking of something like this:

var iOS9 = function() {
    var deviceAgent = navigator.userAgent.toLowerCase();
    return /(iphone|ipod|ipad).* os 9_/.test(deviceAgent);
};

And then;

bigwheel.prototype.onResize = function() {

  var testiOS9 = iOS9();

  var width = testiOS9 ? document.documentElement.clientWidth : global.innerWidth;
  var height = testiOS9 ? document.documentElement.clientHeight : global.innerWidth;

  this.resize(width, height);

};

https://github.com/bigwheel-framework/bigwheel/blob/master/index.js#L264

I know this would be a very ugly way to do it, but I don't really have any other ideas.

I was thinking of maybe rewriting the window.innerWidth outside of bigwheel and then return document.documentElement.client[...] if it's iOS9, but since window.innerWidth is not a function, I guess we'd have to create one like getWindowSize...

Maybe it would be more appropriate to create a single module for it? I don't know.
Also, @mattdesl if you came up with a workaround, I'd be glad to hear your thoughts on this!

Have a nice week-end guys, and thanks Apple 😀

[mattdesl]

I did a bit more tests and added details here:
hughsk/canvas-fit#1

It only occurs with certain meta tags. And it will probably only happen on this version of iOS, I'm sure they will fix it soon. Further, it doesn't happen consistently; only every few refreshes.

It's a really brutal bug. For my demos I have been fixing it by replacing my typical window.innerWidth/Height stuff with document.documentElement.clientWidth/Height. I haven't noticed any side-effects yet.

This demo is using documentElement for canvas sizing, no problems.
http://jam3.github.io/orbit-controls/

This is using window.innerWidth/Height:
http://mattdesl.github.io/rust/

Sometimes it will look like one or the other:

[jonastreub]

Frustrating bug. The meta tag "shrink-to-fit=0" should fix it.

[mattdesl]

Thanks @jonastreub - any other side effects to that tag?

Found some more discussion here:
https://www.reddit.com/r/web_design/comments/3la04p/psa_safari_on_ios9_has_a_media_query_bug/

[jonastreub]

Not that I am aware of.

[mikkoh]

@baptistebriel one thing you could do for the time being is to pass in autoResize: false in your settings object.
https://github.com/bigwheel-framework/bigwheel/blob/master/index.js#L100

After this no event listeners are added for resize however you can manually call resize:
https://github.com/bigwheel-framework/bigwheel/blob/master/index.js#L218

I do agree with @mattdesl this is a Safari bug and they will fix it in the next version. (I hope)

[baptistebriel]

Yep, really frustrating bug... So I think the best way is just to use document.documentElement for now.

Also, see this - how it could be intentional if it doesn't happen consistently? Really looks like a bug.

@jonastreub - Thanks. I will try to add shrink-to-fit and see if this solve the issue!

Thanks @mikkoh 👍

[mattdesl]

Turns out it's not intentional (that's what I thought, too) but the viewport bug is unrelated to the window.innerWidth/Height bug. I submitted a Safari bug report and will post here if anything comes from it. It will probably be a long while before Apple fixes this, and even when they do, a lot of users who haven't updated will still be seeing broken sites. 😢