I am experimenting the same issue that you, and I found this, maybe
can help
1. Safari 4 (Win) with user agent of iphone render different than the
iphone,
I was testing and testing in safari and I just thought "maybe works
on my iphone"... and it works!
2 for the animation it is very important dont forget apply this rules
to the specific container.
-webkit-transform: perspective(number);
-webkit-transform-style: preserve-3d;
- Use the -webkit-perspective property to change the perspective in 3D
and give a sense of depth to a scene by causing elements further away
from the viewer to appear smaller. The -webkit-perspective property
applies the same transform as the perspective transform function,
except that it applies only to the children of the element, not to the
transform applied to the element itself.
- Use the -webkit-transform-style property to change how nested
elements are rendered in 3D space. If -webkit-transform-style is flat,
all children of this element are rendered flattened into the 2D plane
of the element. Therefore, rotating the element about the x-axes or y-
axes causes children positioned at positive or negative z positions to
appear on the element's plane, rather than in front of or behind it.
If -webkit-transform-style is preserve-3d, this flattening is not
performed, so children maintain their position in 3D space.
3 Add the listeners to the objets that are animating and apply the
new class to the objects so, they can not back to the original
position.
objectOut.addEventListener( 'webkitAnimationEnd', function( event )
{ this.className = "class"; }, false );
objectIn.addEventListener( 'webkitAnimationEnd', function( event )
{ this.className = "class"; }, false );
4 Play with the z-index, and translateZ rule to manage depths
5 Be carefull with the background color of the elementes.
I hope it helps
On Mar 2, 4:19 pm, Josh <[email protected]> wrote:
> Were you able to figure out a solution for the issue you're talking
> about? I'm seeing the same issue that has been driving me crazy for a
> while now. I'm even seeing it occasionally in Safari on my mac when I
> have a node that has had a transition applied to it on screen and then
> I perform a transition on a different item on screen.
>
> The best hypothesis I have right now is: interaction on the page is
> causing a partial re-render of the DOM, the transition is then re-
> rendered (in it's last keyframe state) but the re-render is causing
> the content to flash. This is a very hard issue to search the
> internet for - terms such as " blink" and "flash" bring up garbage
> about the <blink> tag and how iPhone doesnt' support flash...
>
> If anyone's come up with a solution for this issue, I will be
> extremely gracious.
>
> On Jan 31, 12:08 am, Brian <[email protected]> wrote:
>
> > I am trying to develop a web app for the iPhone that uses the sliding
> > animation from one div to another via the CSS properties -webkit-
> > transition and -webkit-transform. However, I am experiencing a very
> > strange problem that I could not seem to find any information about.
> > The animation itself works great and is very smooth, both divs move
> > perfectly in sync and the animation looks flawless except for one
> > issue: both divs seem to flash totally white (as if the page was
> > blank) just before the animation starts. By adding alerts at various
> > stages of the JavaScript that dynamically changed the CSS I have
> > determined that the flash occurs immediately after setting the -webkit-
> > transform: translateX(-360px) property. In addition the transition
> > works perfectly in Safari 4 so this issue is specific to my iPhone.
>
> > Hopefully someone can help me with this issue, I've been banging my
> > head against the wall for days trying to get this to work like Apple's
> > SimpleBrowser example
> > code:http://developer.apple.com/safari/library/samplecode/SimpleBrowser/in...
--
You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=en.
