iOS 11 orientation bug

[trytuna]

On iOS 11 I'm having layout issues. If I rapidly orient the device/simulator in landscape and back to portrait the width of super-tab changes to the device height.

I dug a bit in the code and figured that there is an EventListener that listens on the window's resize and orientationchange event which gets fired if the device is reoriented. While I was digging I wondered why there is so much calculation going on to determine the width of super-tab. I looked in the implementation of ion-tabs an figured that they always let the ion-tab's expand to 100% rather than calculate the actual width. Is there an actual reason for calculating the width? If not this should be changed in the future.

I am not sure if this is really an super-tabs or an iOS 11/WebKit bug. It would be nice if some of the more experienced ionic2-super-tabs developer can comment on that so I could maybe report that back to the Ionic team to work around that.

[kissmark73]

Same problem on device :(

[Ilyoskhuja]

I have same problem

[ihadeed]

Unable to reproduce using iPhone X simulator. Is this still an issue with the latest version?

[kissmark73]

A checked again on device and it still wrong. (4.2.0 // iOS11.2.2)

[trytuna]

yes that is still a problem

[ihadeed]

Can you reproduce it with https://github.com/zyra/ionic2-super-tabs-example ? If not, can you take a quick look at your app and see what's different about it that might be causing this bug?

[trytuna]

I've created a brand new Ionic application to demonstrate the issue.

https://github.com/trytuna/ios-orientation-bug

npm install
ionic cordova run ios
cmd + right arrow
cmd + left arrow
(repeat the last two steps if the issue does not occur)

[ihadeed]

Fixed.

The resize method was running too soon, before iOS finished resizing the view. The issue only occurred when rotating the screen too fast.

[trytuna]

Unfortunately this fix isn't working that well. The behaviour I described earlier occurs less often but is still present.

Is it possible to expand each slide to the full width so the width has not to be calculated? That would be a major improvement anyways.

[Ilyoskhuja]

I have similar problem with ipad,

I fixed the problem, I copied flex: 0 0 0 25% from col class of ionic css, and put to my browse.css, now app working without this problem,

I think that problem is in "col", in any other device it is working but in ipad it doesnt working properly.

[Ilyoskhuja]

[ihadeed]

@trytuna tweak the .js files in your project (under node_modules/ionic2-super-tabs/dist) and change the debounce value 125184d#diff-2c687355ad1a65d5095f46fdde86e8a9R289

I'll try to make that debounce value configurable. It's hard to get it perfect. If I make the number too high, the user experience will be poor on high performing devices, and if it's too low, it will cause problems on low performance devices... I'll probably have to find a way to check when the orientation change animation is done before recalculating the dimensions again.

[trytuna]

Is it possible to expand each slide to the full width so the width has not to be calculated? That would be a major improvement anyways.

Please comment on that.

Changing the debounce value isn't a fix. It is a bug that has to be fixed

[ssgriffen]

I agree with @trytuna , although increasing the debounce time works, its not a long term solution as I don't expect ppl to do npm install and then go modify the values in node_modules. Thank you for any attention to this matter.