Working more on this has revealed that there seems to be a connection between there being an image on the first scene and the disappearing text boxes and jumping symbol.
If we take a widget that is working perfectly and dump an image into any scene, this causes the text boxes to disappear only on the first scene. Tapping to another scene and back again restores the Scene 1 text boxes. I’ve attached two projects that illustrate this. Note that this only happens when the widget activates in iBooks so I’ve added the iBooks file, too. It doesn’t happen when previewed in Safari.
We’ve narrowed the bug down to the line of code below and it seems to make no difference where we place this in
load(). Nor can figure out why the presence of an image should make this code problematic. It also happens if we load the image using code instead of simply drag and drop to the canvas.
var counter = $('.box').index($(this)) + 1;
// removing the line below stops the bug occurring
$(this).html('<textarea id="textField' + counter + '" class="text-input" tabindex="' + counter + '" autocapitalize="none" oninput="saveText()">');
We’re also mystified by the fact that if we throw an alert at the end of the
load() code, once we clear the alert in the iBook, the page loads fine even if there’s an image. Why an alert should prevent the bug from occurring makes no sense to us. Obviously, we don’t want to put an alert on every widget.
E3F U6 P102.hype.zip (105.3 KB)
E3F U6 P102 image.hype.zip (124.0 KB)
test.ibooks.zip (549.5 KB)