Bug? Orientation change and refresh() - clientWidth always 1024

[jim]

Hi,

I'm working on an small magazine app which has both a landscape and portrait view.

When the user rotates the iPad, the content should switch to the relevant presentation of the content.

I have set up iScroll, with content in a list, iScroll is initalized and everything works OK

When the user rotates the iPad, the JavasScript resets the width of each list-item, then the width of the iScroll wrapper.

After the new dimensions are in place, I call refresh() in a settimeout, and snap the slide to the currentX to keep the current slide in position.

Everything works fine up to this point, the layout is correct, iScroll is active, but a the distance each slide now incorrect.

So if I switch from landscape mode, where the slide moves 1024px, to portrait mode the slide should move 768px

Instead in portrait mode the slide still moves 1024px on the first slide, and then slowly grinds to a halt.

I've had a look through the source and the refresh state uses 'clientWidth' to get the variable wrapperW, from which the animation is calculated.

Using console.log() to output  the value of clientWidth on device rotation always returns '1024px' for me, which I assume is the source of the issue.

I'm going to continue to play around with it, but if anyone has any other suggestions for fixing it, please let me know

[jim]

A quick hack for this iPad app, but at around line 900:

Swap:
        /*that.wrapperW = that.wrapper.clientWidth || 1;
        that.wrapperH = that.wrapper.clientHeight || 1;*/

For:
          that.wrapperW = (window.orientation == 0 || window.orientation == 180) ? that.wrapper.clientHeight : that.wrapper.clientWidth;
          that.wrapperH = (window.orientation == 0 || window.orientation == 180) ? that.wrapper.clientWidth : that.wrapper.clientHeight;

An everything works as expected :)