I have this problem, I'm trying to work with animations, and everything works as I expect, even in the simulator. But the problem occurs if I take a physical device (Iphone). At that point the background zooms in, and after the animation is done, the div jumps to the left, as seen in the attached video. Video
Has anyone encountered a similar problem? Thanks
This problem only takes place on physical equipment and does not appear in emulators.
The problem occurs on iphone, both on safari and chromium browsers.
Repository code:
Code
I expect the div to stay in the position in which it starts to load when zooming, as shown by the emulators and desktop.
I fixed it by applying will-change: transform;
I introduced some fade-in/fade-out logic when I'm transitioning between "screens" in my react web application. You can see an example of the "screen transition" here: Rabbit (source code).
The animations were working fine on my phone in Safari, but not Chrome.
At first, I thought it was something to do with Chrome on iOS, but today it seems to be working fine.
I've realised that when I was first trying this yesterday, my phone was quite low on battery (no warning, by maybe about 30% ish). Today with my phone fully charged, the "screen transition" animation in Chrome is working fine.
I tried to reproduce by going into iOS accessibility settings and setting "reduced motion", but that doesn't reproduce the issue. My app detects that prefers-reduced-motion is set to reduced, but the screen transition animations seem to function fine regardless of that (though perhaps in future I should turn off the animations if the media-query returns true).
So, while I sit here waiting for my phone to discharge - can anyone point me to any documentation about Chrome not performing animations if the device is low on battery?
For anyone finding this from a search: I was not able to find anything about a "low battery" mode relating to animations on iOS.
The cause of my disappearing animations in Chrome seems to be some kind of intermittent bug. I've seen it a few times since (never managed to reproduce reliably though) and restarting the browser seems to fix it.
I'm having a strange issue with transitions and transforms in Safari in the sub-900px media query in desktop and iOS. They mostly work well, with the exception of the a.logo element on this site:
http://eclipseinterface.com/#welcome
It feels like the transition happens with all of the other elements, but the transform property just pops into place when the transition ends.
I've tried advice on SO that wants me to vendor prefix the translate parameter as well, but that seems to make no difference.
Any thoughts? I've been picking at this bug for a few hours now :(
I have 10 absolute layered background-images. Their sizes are set after the size of the viewport. When the viewport is made large some layers disappear and show up as white blocks. I have only seen this in Chrome. Chrome doesn't seems handle this layered element as well as other browsers on any device. I am using transform: translateZ(0) for GPU acceleration. In other browsers (FF, Safari and IE) the web app performs without this problem. The problem seems not to be affected by the file size, but rather the paint areas.
Does anyone know why this is happening in Chrome or how to fix it?
I am running windows 7 and google chrome 30.
This is a problem with Chrome's compositing engine. I have an active bug report with the Chromium developers. Hopefully, it will be fixed in a timely manner.
Bug report: https://code.google.com/p/chromium/issues/detail?id=346621
Got a really tricky problem that I've been trying to figure out for a while. Essentially I'm building a large rotating wheel which has multiple elements rotating at different speeds. It's about 5000px square, but the viewport is a percentage of window height. Due to the scaling, the wheel itself is an SVG so that it looks sharp on all devices. The SVG has some pretty complicated paths in places.
It's hard to explain, so I've made a barebones demo of what I'm talking about: http://jsfiddle.net/UsVeZ/3/embedded/result/ (edit it here: http://jsfiddle.net/UsVeZ/13/). Click / tap the document to see it rotate.
Everything looks fine, and it works great on the desktop (Chrome + Safari), but when I rotate the wheel on an iPad, mobile safari lags with the rendering. The rotating animation itself is pretty smooth, but it's just the rendering that can't keep up. It's way worse with my complex SVG (which unfortunately I'm not permitted to share, but the demo gives an idea). Check it out on an iPad to see what I mean.
I'm not quite sure how to solve this problem - ideally it would be great if there was some way to keep the entire SVG in memory (not sure exactly how the rendering works or why it's doing what it's doing). If anyone has any ideas, or even a different way to approach, that would be amazing.
This is not a full answer, just a couple of strategies you could follow.
If you apply...
body {
-webkit-transform: scale(0.3);
}
You will see how Mobile Safari caches your svg, it gets pixelated and then renders correctly. If you tap and wait, it will re-cache the image when you tap again. But if you tap continously, you will notice you don't give it a chance to recache the image.
This happens in your jsfiddle too, if you tap continously eventually you don't get any choppy blocks.
So if you don't let Safari recache the image by creating an endless transition like...
$("svg").on("webkitTransitionEnd", function(){
rotation -= .01;
$("#large").css('-webkit-transform', "translate3d(0, 0, 0) rotate(" + rotation + "deg)");
$("#small").css('-webkit-transform', "translate3d(0, 0, 0) rotate(" + ( rotation * 1.5 ) + "deg)");
});
Then the cache will never go stale.
However, once you remove the scale on the body, it seems that Safari won't cache any graphics outside of the viewport. So, perhaps if you make the wheel have a full spin on load it will cache the image.
So I couldn't end up solving this issue properly on my real example. I ended up reverting to images (I split up my large image into 9 smaller images and tiled them to get around iOS' 5mp limit), and on each image I applied the following property which seems to cache the image:
-webkit-transform-style: preserve-3d;
It doesn't scale as nicely, but it works smoothly which is more important.
I actually took several different SVG's and applied a rotation to them in iOS and it ends up adding this box the instant I rotate it. I can't duplicate it in Safari or Chrome (desktop). Tried a bunch of different things to get it to stop, but no luck. I haven't been able to find much feedback online about if its a bug or not.
Just applying -webkit-transform: rotate(122deg);
Example at - http://bit.ly/QnAgFK
I found that certain [object] tags have there #documents add [html][body] tags around the svg in Safari 6. Others don't. So my assumption is this is a mime type host issue, but I've got the image/svg+xml mime-type added for .svg.
I have a dirty fix for this one.
#topParentId *{
-webkit-transform-style: preserve-3d !important;
}
I have applied css to every child of topParentId Id, and this works fine for me. It changes a little css in output but it works fine for me.