Adaptive example crashes iPad on orientation change

[Graham Huber]

http://elasticss.com/demos/Examples_Adaptive_Columns.html

When changing orientation on iOS (iPad, iPhone), this example crashes
Safari.

Can you confirm?

[Fernando]

we dont have an ipad now, but on iphone it does crash safari.

[Graham Huber]

Fernando,

I got around this by disabling refreshOnResize on page load:

Elastic.configuration.refreshOnResize = false;

Then, I use a custom script to detect screen resize and fire
Elastic.refresh():

viewportwidth = document.documentElement.clientWidth; // Old, but
IE7 safe.
viewportheight = document.documentElement.clientHeight;

function resize_detect() {
var currentSize = getViewportSize();
if (currentSize != g_prevSize) {
g_prevSize = currentSize;

viewportwidth = document.documentElement.clientWidth;
viewportheight = document.documentElement.clientHeight;

resizeEvent(g_prevSize,viewportheight);
}
}

function init_resize_detect() {
window.g_prevSize = getViewportSize();
setInterval(resize_detect, 1000);
}

function getViewportSize() {
if (typeof window.innerWidth != 'undefined') {
width = window.innerWidth;
} else if (typeof document.documentElement != 'undefined' &&
typeof document.documentElement.clientWidth !=
'undefined' &&
document.documentElement.clientWidth != 0) {
width = document.documentElement.clientWidth;
} else {
width = document.getElementsByTagName('body').clientWidth;
}
return width;
}

init_resize_detect();

function resizeEvent(viewportwidth,viewportheight) {

// Reset elastic layout

Elastic.refresh();

}


I'm sure my solution is crude, but it works. The crash is prevented on
iOS.

I originally wrote this script to correct IE7 from crashing when
detecting media queries with respond.js (now part of Modernizer).
Window.resize() hangs IE7 for me.

Ironically, Elastic's native resizing DOES work correctly in IE7 (as
well as my method above). Good job on that!

[Sergio de la Garza]

Awesome!, 

maybe mobile safari triggers resize a bunch of times when changing the orientation we will work in a fix for this.

Thank you!

-- 
Sergio de la Garza
Sent with Sparrow

--
You received this message because you are subscribed to the Google Groups "Elastic CSS Framework" group.
To post to this group, send email to elastic-cs...@googlegroups.com.
To unsubscribe from this group, send email to elastic-css-fram...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/elastic-css-framework?hl=en.

[Graham Huber]

Yes, I can confirm from my testing that iOS Safari triggers multiple
resize events when the viewport height is calculated on load. It seems
to calculate the height several times, perhaps as content is loaded?

This caused issues for me with another script too on resize/
orientation change.

Originally, I wrote my resize detection there to check both width and
height, but the height check was triggering multiple resize events on
iOS (at least on the iPhone) -- so I limited it to just the width
check. This corrected the issue with another element hanging on
resize.

Happy to help!

p.s. GREAT work on this, Elastic CSS is amazing! There's nothing else
out there like it... I've been through all the options, and nothing
comes close. Most other frameworks can't even calculate the relative
percentages correctly or consistently, or are limited to a set grid.
I'm putting it through the ringer right now on a very mobile / media
queries intensive project, so I'll keep you posted with anything else
I find.


On Jul 20, 10:46 pm, Sergio de la Garza <sergio.delaga...@gmail.com>
wrote:

> Awesome!,
>
> maybe mobile safari triggers resize a bunch of times when changing the orientation we will work in a fix for this.
>
> Thank you!
>
> --
> Sergio de la Garza

> Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

> > On Jul 20, 8:59 pm, Fernando <trasv...@gmail.com (http://gmail.com)> wrote:
> > > we dont have an ipad now, but on iphone it does crash safari.
>

> > > On Jul 20, 6:26 pm, Graham Huber <ghu...@gmail.com (http://gmail.com)> wrote:
>
> > > >http://elasticss.com/demos/Examples_Adaptive_Columns.html
>
> > > > When changing orientation on iOS (iPad, iPhone), this example crashes
> > > > Safari.
>
> > > > Can you confirm?
>
> > --
> > You received this message because you are subscribed to the Google Groups "Elastic CSS Framework" group.

> > To post to this group, send email to elastic-cs...@googlegroups.com (mailto:elastic-cs...@googlegroups.com).
> > To unsubscribe from this group, send email to elastic-css-fram...@googlegroups.com (mailto:elastic-css-fram...@googlegroups.com).

[fernando trasvina]

thanks a lot for the contribution and we will sure use all your input to improve the framework

> To post to this group, send email to elastic-cs...@googlegroups.com.
> To unsubscribe from this group, send email to elastic-css-fram...@googlegroups.com.