Thursday, September 15, 2011

Hide Audio in Read Aloud to avoid Shifting Images

I found a weird behavior in a Read Aloud book I was working on today: each full spread image started about 20 pixels down the page and then shifted back up to the top after a second or two. I did my usual compare and conquer with an earlier version that didn't have the shift (BBEdit's Compare Two Front Documents is a key tool in this battle) until I narrowed it down to the audio element.

Remember that in a Read Aloud book, the audio element is not visible, but rather, is controlled by the Read Aloud menu, or by buttons. However, if you don't hide the audio button, you may get this shifty image, as I did.

Shifting images in Read Aloud from Liz Castro on Vimeo.

The solution is to push the audio element off the screen with this code:

audio {position: absolute;
top: -30px;

as Apple suggests, and yes, I admit it, as I said was probably not necessary. I was wrong, it is necessary.


  1. Thanks, I've been struggling with that for days on my current project, hoping it would go away (Or you would solve it!). I was convinced it was related to caching, so I tried every possible scenario.


    And thanks for sharing.

  2. Liz, have you figured out a way to trigger an additional sound effect on a page by tapping on a hot spit? This would be in addition to the background soundtrack and the narration sound... I want to make the iBook more app-like and touch on one of the characters to hear an additional phrase (or 3) that they might say. Have not been able to find any Apple demo code for this (other than with showing the sound controller for embedded audio).



More of my books