|
|
| Page 1 of 1 |
|
|
 Posted: Mon, 20th Apr 2015 16:47 Post subject: High performance CSS3 effects |
|
 |
So I've been assigned to build some ipad app again... and I am struggling a bit to use some nice effects (it will be just a showcase prototype) that are NOT a big hit on performance. I built this effect from scratch and it looked quite neat on the pc, but they gave me an iPad Air 2 and this doesn't look very fluid at all on it.
http://jsfiddle.net/3m59jemf/1/
Do you guys have some ideas what type of effects look good and perform well on an iPad?
Meh, I guess that's due to the resolution. In fullscreen this effect is also a bit choppy on my laptop with intel graphics and this has still a lower resolution than the 2048x1536 resolution of the ipad.
|
|
| Back to top |
|
|
|
|
| Posted: Mon, 20th Apr 2015 19:02 Post subject: |
|
|
My instinct is that it's the animation of a dynamic vector that does it
tried using SVG rather than the barely existent clip-path, or some other method?
the elements only appear after the circle already fills the screen so it's not accomplishing anything you couldn't fake out in another way
|
|
| Back to top |
|
|
|
|
| Posted: Mon, 20th Apr 2015 19:11 Post subject: |
|
|
I'd rather stay away from SVG and in this case, yes there isn't much else but later on there'll be of course some sort of content inside that little round notification.
I was just playing around with effects anyway when I was looking at various flat designs. Apparently transformations are handled quite well.
|
|
| Back to top |
|
|
|
|
| Posted: Mon, 20th Apr 2015 21:53 Post subject: |
|
|
Apple products are from hell -.-"
I hate it when we get support that on retina display ipad some icons are not showing or some shit like that. And there is no reason why it shouldn't work!
Anycow, try adding additional -webkit- prefix in front of any properties. You have one transition, that doesn't have a -webkit- prefix. Don't think that will do much, but it's worth a shot.
Btw you are looking at this in chrome or safari?
And yeah, css transitions in new browsers depend heavily on hardware. All the sites we develop work smooth and nicely on my new comp, but they know to stutter on work laptops.
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Tue, 21st Apr 2015 11:54 Post subject: |
|
|
Instead of using the clip-path to generate a clipping sphere, setting the border radius to half the containers width + css scaling and a separate container for the text content of the div made the whole thing perform super fluidly 
|
|
| Back to top |
|
|
Werelds
Special Little Man
Posts: 15098
Location: 0100111001001100
|
| Posted: Tue, 21st Apr 2015 13:10 Post subject: |
|
|
You'll want to include a translateZ(0) too 
|
|
| Back to top |
|
|
|
|
| Posted: Tue, 21st Apr 2015 13:27 Post subject: |
|
|
Did a translate3d before on the object to position it at the right position, so that should've done the trick, but thx
|
|
| Back to top |
|
|
| Page 1 of 1 |
All times are GMT + 1 Hour |
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
Powered by phpBB 2.0.8 © 2001, 2002 phpBB Group
|
|
 |
|
