I'm using deck.js (http://imakewebthings.com/deck.js/) to recreate a company powerpoint presentation, using a fair bit of CSS3 animations and Javascript.
Testing through development on my wifi-only iPad2 it's been fine, but checking on a wifi+3G iPad1, 2, & 3 the page crashes Safari on page load (iPhone 4S works fine).
Some basic debugging (deleting slides one by one) suggests that it's the size of the DOM that is forcing the crash, as it works fine when I reduce the presentation down from 31 slides to 21.
The total size of the page is about 4.3MB, and I've tried using an appcache manifest to no avail.
I've read on various forums that many people are having issues with iOS 5.1 Safari crashing - does anyone have any experience of the iPad 3G models crashing under the strain of a complex DOM?
Any thoughts and suggestions much appreciated.
As is, it seems to be a limitation of deck.js on such devices. Martin Fowler reported the same problems and ended up loading slides incrementally as a workaround (http://martinfowler.com/bliki/Infodeck.html).
It would be helpful to see if the problem comes from loading the DOM or from displaying it (the default deck.js themes are not optimized for display efficiency). Unfortunately, I cannot test as I don't have an ipad, but what I would recommend to try and hide all slides and see if there is still a crash. Some CSS code to do that:
.deck-container > .slide:not(.deck-current), .deck-container > .slide:not(.deck-child-current) { display: none; }
Related
After pushing my site to the development server, I'm seeing horizontal scrolling on iOS (which I wasn't seeing when developing locally). I'm using an off canvas navigation menu which is giving the page the extra width. Here is the site.
Any help is greatly appreciated. Thanks for your time!
I inspected your site in Desktop Safari and I see the same issue.
The issue seems to be that the site layout still thinks it's wider. At first I was certain that a simple application of overflow-x:hidden and width:100% would do the trick.
However—
You seem to have done that.
It didn't.
I found it difficult to sift through the CSS because you have a lot going on, and I think it's possible that the CSS3 transforms are contributing to the issue, but I was able to lock it down while viewing in Desktop Safari and while inspecting Mobile Safari directly with the following:
Apply position:fixed to your primary navigation, rather than position:absolute. Desktop Safari was happy with this.
Remove your .site-content::before pseudo-element. This was still causing the issue on Mobile Safari. Removing the CSS transform to translate3d(100%,0,0) also helped.
Side note: You might also consider ways to simplify your HTML and/or CSS. You have 1.1MB loading without any real images; for mobile users, bandwidth is a real cost. I know that can be a PITA but worth mentioning. Good luck!
I'm experimenting with different techniques using Amazium here http://stevengeorgeharris.com/croft/croft; when viewing on an iPad the image of the ballet dancer is missing, yet appears on everything else including Nexus 7 and iPhone 5. I have played around with positioning and z-index's but nothing happens.
I then went into IOS simulator to use web inspector and I noticed when I refresh the page the image appears and quickly disappears again. I cannot for the life of me find the cause of the problem, maybe I am over looking something very simple, as I usually do.
Change position:relative to position:absolute for it to show up on iOS.
i just see the website try to add overflow:hidden it will be good in regular explorer but it will not work in iOS but look nice
We are developing an HTML5 + CSS3 application for iPad and iPhone.
The app is working fine on iPad & all iPhones, however, iPad 2 shows html dom objects pixellated on startup, and stays like that, sometimes always, sometimes for a few moments.
App is designed for touch and gestures. We used translate3D for hardware acceleration on scrolling objects. We are also using jQuery (v1.7), but the scroller we designed is pure javascript, no frameworks there. jQuery is mostly used in finding/adding/removing dom objects and ajax. Except jQuery everything else is in-house written, including the jQuery plugins we are using.
As i said, animations are achieved by translate3D. For sliding effects we are changing the x or y axis values of the -webkit-transform, and when the touchend event is received, a momentum animation is achieved with javascript, -webkit-transition and translate3D. While app is being written, Apple's iOS Safari documentation is highly used as a guide.
Even though the app is working fine on iPad, iPod Touch (2nd gen), iPhone 3gs and iPhone 4, when it comes to testing on iPad 2 we started to see this pixellated screen. The strangest part is, the 3d accelerated content is the only part that gets pixellated. I've attached two screenshots, one from iPad, another from iPad2. You can see what I meant (they are taken in different times of the same day, so the content is different, sorry for that).
The main content (the boxes with images) can slide up and down with touch events. On iPad2, only this part is pixellated. While sliding, the pixellation stays most of the times, but on some tests it resets after a few seconds.
In addition, the html content has this line in :
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
We are starting the hardware acceleration through CSS, and the main sliding objects has this property :
-webkit-transform: translate3d(0,0,0);
For flicker proofing, images are not inside any dom object that has a background color, and has this property :
-webkit-backface-visibility: hidden;
For more flicker proofing on some cases we used this property (but the pixellated content in the screen capture does not have this one assigned):
-webkit-perspective: 0;
The app does not have 'apple-touch-startup-image' at the moment, so our first thought was that the startup capture ios makes is somehow messed. But it turns out that is not the problem, as after the content is downloaded via wi-fi, pixellation stays the same.
If anyone ever came across to this or a similar problem and was able to solve it, please answer as we have no other ideas left.
I tried to give as much information as I can, and here are the screenshots I've promissed:
iPad :
iPad 2 :
Try removing the transform and reapplying it immediately through a timeout:
$("#sliding").css("-webkit-transform: none");
setTimeout(
$("#sliding").css("-webkit-transform", "translate3d(0,0,0)")
, 0);
Does anyone know if the iPad has any limitations on the canvas tag?
Currently I'm working on a creative that uses a flipbook and audio tag combination to simulate inline video content. The animations are drawn to the canvas element and synced with the audio content being played. There are 4 short video clips that get played when someone clicks on the four buttons below.
http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungfupanda2_test/
The problem I'm having though is in iPad. After playing a few animations, mobile safari just suddenly crashes. It never happens when I play it on my iPhone but it happens every time on the iPad. Its not one particular animation either because if I click a different combination of buttons, the previous clip that it crashed on plays fine, and then it decides to crash on another clip.
I think the problem might have to do with the amount of memory Safari gives individual page views. I found a blog post that explains that problem pretty well.
http://roblaplaca.com/blog/2010/05/05/ipad-safari-image-limit-workaround/
According to that post, once mobile Safari reaches a particular threshold of memory, images begin to return blank. This is consistant with my finds so far. The iPad that I'm testing this all on is running iOS 3.2.1 (and before anyone tells me that I should just explain to my boss that nobody uses 3.X anymore, I tried... they still want me to investigate this). I borrowed a co-workers iPad running iOS 4.2.1 and that device didn't crash, but some of the images weren't being drawn to the canvas.
I'm pretty sure its a problem with the canvas tag too, because I tried experimenting with running the animation without drawing anything to the canvas element, and the page never crashed.
Thats why I think maybe its a limitation with Safari's support of the canvas tag. Of course, I'm open to anybody else's suggestions.
Feels kinda weird answering my own question again, buuuut I figured if anyone did a search on this kind of question, an answer would be helpful.
I believe my original hypothesis was correct. The total amount of images that the aniamtions were using was around 600+. I think the older iPad loaded as many as it could and then when it ran out of cache and the canvas tag was trying to draw images that weren't really there anymore, it crashed.
Eventually we ended up serving the ad to devices with iOS 4.2 and higher, since the problem didn't seem to occur on those newer devices. Plus, we compressed the image sizes further, so that helped reduce the amount of images we were storing into memory.
If anybody knows approximately what the cache threshold in iOS 4.2 or higher browsers are, I'd appreciate it if you commented. Just want to get an idea of how many KB of image data I can safely load.
I've been working on an iPad-specific site that uses HTML5 video and though I've got video playback working, I can't for the life of me get the poster image to appear. It looks fine on Desktop Safari. Here's the code:
<video src="video/about_the_man.mp4" controls height=360 width=480 poster="video/posters/about_the_man.jpg"></video>
I've using this link as a reference (listing 1.2): https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6
It says that on iOS the poster image will be shown until the user initiates playback, but right now all I'm getting is a black video-sized screen with a big play button in the center. I've looked at other postings on this top (here and here) but neither solution has worked for me. The only thing that's a little bit unconventional about the site is that the video element is in an inline lightbox, so initially on pageload it's not visible, but I don't know why that would make a difference.
I had the exact same problem. I decided to try my code on other iPad's, and it worked fine. The poster image showed up.
After scratching my head for a bit, the solution was to hard reset the iPad and try again. After a reboot, my iPad displayed the poster image as it should.
Maybe it will work for you?
I found there is a limit to the amount of images you can load on an iPad
Here is what it says:
I hit a mobile Safari limitation recently when building an AJAX-y site
on the iPad. If you load a ton of images eventually mobile Safari cuts
you off and will display a [?] instead of the image. After doing some
tests it appears that this limit is around 6.5 MB. Here’s a test page
I made that attempts to load 20 500kb images. When opening this page
on an iPad, 7 of the images don’t appear, even though in Charles they
are returning 200 – success. I’m assuming this is similar to the way
autoplay is disabled for the video tag on iPad/iPhone. Apple probably
wants to make sure users don’t get overloaded with downloads when
browsing on 3G.
Anyhow, 6.5 MB is a hefty load and wouldn’t fare well on 3G, but for one reason or another you may want to work around this limitation. I found the easiest way to patch my code was to load the image into a canvas tag using drawImage(). The canvas tag appears to be immune to the limitation.
Here’s another test page using the canvas tag, all the images should load.