Comments on: JavaScript and interactivity in iBooks

By: Raju Chakraborty

Raju Chakraborty — Wed, 22 Sep 2010 04:42:25 +0000

I found quite a few problems in trying this in one of our iBooks for iPad. I found it to be working on the first page and not to be working on pages thereafter. Another problem I saw is that if the clickable object is at the page end it only shows the part of the pop up box, based on the bottom space available on that particular page. It doesn’t turns the page over or the pop up box doesn’t appear above the clickable object.
I also require some hints on how to animate text (fly, say from top to bottom) on iPad through Javascript. My code is working fine on the browser but not working in iPad. Is the application in iPad still not that smart?

By: Pumping Irony » Investigating MOBI

Pumping Irony » Investigating MOBI — Tue, 21 Sep 2010 18:17:20 +0000

[...] via limited JavaScript is coming as well (already supported in Apple’s iBooks — here is a sample). For myself, I am primarily interested solely in reading fiction on an e-reader device so I am not [...]

By: Julien

Julien — Mon, 13 Sep 2010 21:34:12 +0000

Thanks Liza, that’s good to know that it’s fixed! Let’s just hope iBooks use the stock webkit and not some kind of dumbed down fork.

Some time after I posted my comment, I quickly tried your code without opacity (using visible) and with translate3D, and it indeed doesn’t react faster at all after the touch event. But as there is no more transition, we gain the transition time, so it’s perceptually a little bit quicker.

Anyway, thanks a lot for these nice experiments — I surely now want to try a few other things with CSS and Javascript in iBooks :-) And let push some of these experimentations to the iBookstore, because, contrary to the popular belief, Apple listen… well, they sometimes listen!

(Sorry that I didn’t came back to say so earlier… it was a quick experiment late at night, and the next morning I had totally forgotten)

By: Liza Daly

Liza Daly — Fri, 10 Sep 2010 00:09:19 +0000

Hi Julien,

Opacity changes via CSS transitions _are_ hardware-accelerated on Mobile Safari. Same with translateX — that was fixed in (I believe) iPhone OS 3.2.

By: Julien

Julien — Thu, 09 Sep 2010 23:34:20 +0000

Liza, I just checked your code, and the slowdown could very well be because of the use of TranslateY / TranslateX instead of Translate3D:

«When using -webkit-transform, be sure to use the translate3d(x,y,z) syntax, instead of using translate(x,y). For some reason, the latter is not hardware-accelerated, at least not on iPhone OS 3.x »

From Paragraph 7. there : http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/ (a nice post by the javascript guru Thomas Fuchs :-)

Also, he points to Opacity, that you also use in your code, as a possible culprit «For some reason, using the opacity CSS property sometimes interferes with hardware-accelerated rendering, so if you experience slowdowns and think you’re doing everything right, see if you have opacity set somewhere.»

By: Liza Daly

Liza Daly — Sun, 29 Aug 2010 19:46:47 +0000

Martin: You’re right, it shouldn’t work in Ibis as we do deliberately disable scripts.

My comparison was based on the transitions that Ibis Reader uses for its own interface (like menus), not based on what was added to a book.

By: Martin Bayly

Martin Bayly — Sat, 28 Aug 2010 16:59:20 +0000

In previous comment meant to say it looked like the