Streaming live at 10am (PST)

iOS Safari Issues on iPad 3 / iPhone 4


#1

Hi, I'm currently working on my new portfolio website http://thorstenkloepfer.webflow.com and having issues getting it to work on iOS Safari iPad 3 / iPhone 4. While it loads the site, it instantly crashes sometimes it leads even to a complete reset of the iPad, one in 10 times I could make it load the site but when I turn the device from portrait to panorama it for sure crashes.

I know this topic has been up and discussed before and I went through all my images to make them smaller than 200kb but still it won't work.

Does anyone have an idea? Are there just too many images in general, the whole size of the site is around 6MB, in the iOS specs it says max. should be 30MB.

http://thorstenkloepfer.webflow.com

https://webflow.com/design/thorstenkloepfer?preview=ce949c0708a2fe55c2217200500c50c4


#2

8MB?! What the hell is there? It shouldn't be more than 1.5MB to have a nice user experience...


#3

Well, thanks for your feedback, I know that 6MB is not that small, but there are 6 projects that I show, each has several slides, this summed up, makes it the size it has.

But do you actually have an answer, what makes Safari on iPad and iPhone crash?


#4

Update: Meanwhile I went through my images and made the whole site shrink to 3.8MB, the problem with the site crashing on iPad 3 iOS 7.1 Safari kept the same, loading the site in panorama mode works rarely, sometimes I can make the site load in portrait mode, whenever I turn the device to switch the view it makes the browser crash, same on iPhone 4 iOS 7 Safari...

Any constructive help would be much appreciated!


#5

Hi @Ten, well I took a glance at your site, and "I think" that lazy loading of your slider images may be a possible solution in this situation. If you lazy load your images, then the site will only need to load the current + next image for any given slider, thus reducing a ton of image data the page has to load at once...

You can do this code to lazy load yourself, you need to start using the data-src custom attribute of images, that will be used as the src property of images to load, ... This works so that the slider will trigger the code to load next image source, once the "slid" event is triggered and NEXT() method is used on the items in the carousel:

$('#myCarousel').on('slid', function() {
var $nextImage = $('.active.item', this).next('.item').find('img');
$nextImage.attr('src', $nextImage.data('lazy-load-src'));

});

This code is placed in the custom code section of your site in the before body section...

Now this is one method I found, and may not be the best one still for you, you have to play around with this... Another option is to use another slider completely, that has lazy loading built in, like Owl Carousel:

http://www.owlgraphic.com/owlcarousel/demos/lazyLoad.html

There is complete code example on the Owl Carousel site how to integrate that to your site... and the carousel is free to implement on your website.

In any case, I think some combination of lazy load behaviour on images is a good solution to your large data load needs.... not saying there is not some work involved to change things, but it depends how much of speedy page performance is important to you for your mobile visitors or desktop visitors..

Just some suggestions.... I have to try the above myself to get it integrated to webflow page smile to see how it works out smile


#6

Hi @cyberdave, thank you for taking the time and looking into it, lazy loading sounds like a good idea. I'll try to implement the code and hope I can somehow make it work!


#7

Hey @Ten, I'll take a closer look tomorrow when I have access to an iPhone 4. Not sure if it's the IOS resource limits or not that are causing the crash, or something particular to Webflow.


#8

Hi @callmevlad thanks for your reply, it seems like its not iPhone4 specific, it also happened on an iPhone 5, switching between pano and portrait causes some difficulty and makes the browser crash.


#9

@Ten, yep - able to reproduce on an iPhone 5 with IOS 7 - still looking into what might be causing it.

Update: It appears that the many sliders on the page cause an out of memory crash on IOS Safari when changing orientation. Because each slider has to recalculate the position of each slide, and each slider has quite a few images, mobile Safari can't seem to keep up.

We are looking at ways that we can resolve this in our slider JavaScript, but not sure what our options are yet.

In the mean time, it might make sense to break out some of the sliders into separate pages (e.g. have a section for each project, but move the slider content to a detail page, e.g. /porsche, /21torr, etc). This might actually be better for usability on mobile anyway, since navigating through so many sliders on my iPhone feels a bit overwhelming.

I'm running more tests now to figure out some fixes/optimizations to our slider code.


#10

@callmevlad thank you for looking into it and finding out, I hoped to get away without making detail pages, but ja maybe thats the only way!


#11

+1 for moving those sliders into separate pages smile

Unfortunately most mobile devices still have fairly weak CPUs, so when we try to make them calculate a lot of complex, image-heavy layouts, they are bound to hit their limits.

Luckily, with Symbols nearing final release- it should hopefully be painless to build those sub-pages! thumbsup


#12

#13