View Full Version : [FIXED] Objects positioned incorrectly when viewed on Safari on an iphone

22 Sep 2011, 11:57 AM
Here is the issue I'm having. I made an animation where the background layer, a tall rectangle almost 4000 pixels tall, moves vertically for the duration of the animation. It starts with the top of the rectangle aligned with the top of the stage, and ends with the almost the bottom of the rectangle aligned with the bottom of the stage (the bottom of rectangle actually goes a tiny little bit past the bottom of the stage). So, basically it's moving up, giving the viewer the feeling of descending. Anyway, it looks great on Safari on the mac, but in Safari on the iphone, what happens is two curious things. Even though the rectangle is as wide as the stage, it looks to be half as wide on the iphone. And even though the image never fully uncovers the background of the stage---on the iphone, it keeps rising vertically before the end of the animation duration, revealing the background. Why it works perfectly on the my imac but does this on my iphone is inexplicable to me.

22 Sep 2011, 4:18 PM
Interesting. Do you have a link?

22 Sep 2011, 6:02 PM
Here is the link:


22 Sep 2011, 6:06 PM
Oh, by the way, it only appears to be viewable in Safari, and
on my Mac it looks perfect in Safari, but in Safari on my iphone
the background doesn't work properly. It's shifted to the left,
and it lifts up at the end before one cycle of the looping animation
is over, revealing the stage behind it. In Sencha, it's just two keyframes.
The first is the at the first frame, top of background rectangle, 640 wide
by almost 4000 tall, aligned with the top of the 640 by 640 stage. Then
the only other keyframe is the vertical position is moved so that almost
the bottom of the rectangle (a little hangs over past the bottom of the stage
for seamless looping purposes) is aligned with the bottom of the stage. It
just moves up.

23 Sep 2011, 10:35 AM
If you add this code to the exported code in the css section

#AN-sObj-33497 img {
height: 3997px;
width: 640px;

Then it works for me. Looks like the iPhone is resizing down the image unless height/width is specified for it directly.

I am attaching your code with the the new css rule applied.

Note that the css id is dynamically generated unless you set a custom css id for an object in animator. So if you need to re-export the project you should set a custom css id for the background (e.g. to "scene-background") and you could add the following css code to the exported file.

#scene-background img {
height: 3997px;
width: 640px;

27 Sep 2011, 12:25 PM
Thank you, that appears to work. Is there a way to ensure when moving an object/layer like that, using keyframes, within Sencha that ensures that that problem doesn't happen so that you don't need to add CSS code manually to the HTML file?

27 Sep 2011, 4:49 PM
We're working on a fix.