Crashes on iPad
rachelnabors opened this issue · comments
I wanted to document this behavior. I've checked other, shorter deck.js slides that don't have this problem. But on the iPad, my large slide decks like https://github.com/rachelnabors/animation-workshop will crash iOS Safari. I think this has to do with the number of iframes. I'm looking for a solution, including investigating the lazyload extension (but I don't like how it interrupts deck.js's elegant pagination and transitions!).
I think ideally, all iframe content would only be loaded when it's on the current slide, then removed when that slide is no longer in action. But given how many codepen and youtube iframes I'm using, coming up with a one-size-fits-all solution could be tricky.
Hi Rachel,
I have two answers for you. First, let's try to solve your problem today. https://gist.github.com/imakewebthings/1342565
The problem you're having has been a part of deck.js from day one. The snippets in the gist above is a hacked together extension to work around the problem. If you include it in your deck, I believe it will help. Here's how it basically works:
- Slides that are a certain distance away from the current slide are given an extra class, "deck-horizon".
- Those slides are given
display:none. This appears to have the effect of reducing the resource demands of that slide. The transform3d used to trigger GPU acceleration for the transitions is quite the memory (or something) hog and hiding the slide frees this up. - The "distance" from the current slide where this class is applied is controlled by the "horizon" option you see in the gist. It defaults to 16. It should be adjusted to suit the needs of your deck. You'll want it to be at least as big is the largest number of subslides you have on any given slide. (Otherwise the parent slide might be hidden by the horizon).
So hopefully you can apply this to your project and things smooth out. Keep me updated on whether it works or not.
The second answer I have is that the first answer is a shitty answer. This is a consideration that needs to be moved into the core or core set of default extensions. The git log of this project hints at exactly how little time I've had to work on deck.js recently. But I am trying earnestly to carve out a large chunk of time in the near future to both work towards clearing the issue backlog and to implement major changes. This issue needs to be a part of that work. So even if the above solution works for your deck, I'm going to keep this issue open and marked until it's resolved properly.
Thanks, and good luck.
Wow, thanks for getting back to me so comprehensively!
My only question is: how do I initiate this alongside ye olden:
$.deck('.slide');
I'm not familiar with doing much extending!
@rachelnabors You could put the JS portion inside its own JS file and load it with a <script> tag, like the other extensions (hash, goto, etc.). And add the CSS in whatever CSS file you feel like. Or really, if you don't mind the page source looking dirty, you could just copy that whole thing into your HTML sometime before your $.deck('.slide') init.
So, big problem here: when I skip directly to a page with a hashtag like so http://rachelnabors.com/css-amv-talk/animation-power-techniques.html#slide-29 the page renders blank...
@rachelnabors Am I right that the page you linked to doesn't include the horizon stuff?
It does not, sorry! On a plane. Here, rachelnabors.com/css-animation-master-class/index.html#slide-222 should do it.
Rachel Nabors
Coming to speak at a city near you!
Oct Frontend Masters, Minneapolis + Online (https://frontendmasters.com/workshops/animated-css3-html5/) (workshop of AWESOME)
Oct CSS Dev Conf, Colorado (http://2013.cssdevconf.com/)
RachelNabors.com (http://rachelnabors.com/) | @rachelnabors (http://twitter.com/rachelnabors) | my old comics (http://rachelthegreat.com/)
On Thursday, October 3, 2013 at 7:43 PM, Caleb Troughton wrote:
@rachelnabors (https://github.com/rachelnabors) Am I right that the page you linked to doesn't include the horizon stuff?
—
Reply to this email directly or view it on GitHub (#134 (comment)).
@rachelnabors Underscoring the hackiness of this stopgap further... could you please try taking the horizon chunk of script and moving it to above the script that includes deck.hash? Leaving the $.deck('.slide') init where it is... Thanks.
That seems to have worked! Thanks!
Rachel Nabors
Coming to speak at a city near you!
Oct Frontend Masters, Minneapolis + Online (https://frontendmasters.com/workshops/animated-css3-html5/) (workshop of AWESOME)
Oct CSS Dev Conf, Colorado (http://2013.cssdevconf.com/)
RachelNabors.com (http://rachelnabors.com/) | @rachelnabors (http://twitter.com/rachelnabors) | my old comics (http://rachelthegreat.com/)
On Thursday, October 3, 2013 at 9:55 PM, Caleb Troughton wrote:
@rachelnabors (https://github.com/rachelnabors) Underscoring the hackiness of this stopgap further... could you please try taking the horizon chunk of script and moving it to above the script that includes deck.hash? Leaving the $.deck('.slide') init where it is... Thanks.
—
Reply to this email directly or view it on GitHub (#134 (comment)).