So I posted this project before, but the zooms between the rooms stutter pretty bad on mobile, and really freak out on firefox.
The whole thing clocks in at less than 2mb, and I dunno what I could do better.
Any ideas?
No suggestions on speeding this up?
I will probably have to transfer the room zooms to just crossfades, which reduces the impact, IMO.
Hi Lucas!
Do You have an Hype example of the finished project... the March 15(?) version is the only one I can find. Maybe it uses the same "zoom~scaling" code as the finished piece, maybe not. It is difficult to troubleshoot this kind of problem based on the web page alone. A downloadable link in this thread to the finished Hype file would be helpful.
I did an Internet search for "CSS zoom problems", "CSS scale problems", "mobile zoom problems", along with "Firefox mobile issues" queries thrown in, etc. There are a lot of pages on these topics.
One thing stood out in a brief reading of some of these links: using a 3D transform in the scaling operation. Using the 3D transform forces the use of the GPU.
solution as per this link:
.kenburns img.zoom {
transform: scale(2) rotate(0.1deg);
}
Other examples used a rotation value as low as ".001".
Another suggestion was:
transform: translateZ(0);
Haven't tried any of this coding myself, but the same "use 3D transform" solution kept popping up, so it might be worth giving it a go.
We set this attribute on all elements if you have 'Use Webkit Graphics acceleration' set to on (this is the default).
One thing that might be worth trying @LucasKA is splitting up your large images into chunks. A large image split into four chunks may reduce the GPU requirements for scaling it.
Another suggestion was: transform: translateZ(0);
@Daniel
Does 'Use Webkit Graphics acceleration' also set this attribute on all elements for non-WebKit browsers as well? The name would suggest not, but I just wanted to check. If not, it would seem beneficial to apply to all. In the articles I read, Firefox browsers (mobile) were sited just as often, if not more than Safari, as problematic in the scaling issue.
I changed the original from scale/translate, to resize/translate.
Scaling will rasterize an SVG and it loses it’s crispness (half the point of using SVG). I wouldn’t recommend scaling overall on anything that has svg (fonts/images), haven’t had any quality results with that. Pure CSS elements would probably scale well.
@Daniel The image itself is only about 180k. It’s not that heavy, and in Chrome/Safari/Opera the desktop scale/translate runs fine, but in desktop firefox it’s chunky.
Heres the archive if you wanna see how I’m doing things.
palm-oil-quiz.zip (572.4 KB)
No. I don't think is has the same effect outside of Webkit. Only webkit is fooled as far as I know.
I recommend unchecking 'position with CSS left/top' in the document inspector for your document. Also, can you see if the Z rotation trick has any performance impact for you? The email field is interfering with testing so I can't really see what affect this has.
This thread has more tricks Scaling a *huge* SVG by a *large* number = blurring / stuttering - GSAP - GreenSock
How do I see if the z-rotation trick is even working?
I checked that thread out, but not sure any of that will work. I might just deal with the jank. Most people internally aren’t complaining about it.
Hi Lucas!
Just the HTML material is in the ZIP file you provided just above... the Hype file itself is what is needed.
Thank You… also just remembered about restoring the “hyperesources” folder. Just now tried that for the first time (quiz.hyperesources) - success!
Hi Lucas!
This animation is something of an acid test for browsers.
Running the “Preview” version on my iMac (10.9.5):
/-------------------------------------------------------------------
• Chrome (50.0.2661.75): Grade “A” - smooth, looks great.
• Safari (7.06): "Grade “C” - somewhat jerky, but it doesn’t ruin the presentation.
• FireFox (45.0.2): Grade “F” - brutal… but You already knew that ;->
I tried the “3D Transform” technique with Firefox, no discernible difference. Tried scaling instead of height/width to seen what happened, lit it on fire, etc. Couldn’t buy a thrill.
Safari on my iPad: Grade “C”, with the ‘Use Webkit Graphics acceleration’ on. “C-” without it.
I wish I had a solution for You but I’ve come up empty.
BTW: I had a look at the “house-overview-selectors.svg” in Illustrator (which would only display a small part of the image - Message: “Clipping will be lost on roundtrip to Tiny.”) It appears to be a complex document, even though it’s just 313 KB. Scaling all those vectors is no doubt contributing to the issue.
Thanks for trying some things out. The house is a bit complex for sure, it is all the 5 rooms combined, and the solutions seem to be:
- Keep it the same = chunky animation on mobile, horrid on Firefox
- Big JPG at a huge resolution = smooth animation but loses clarity on zoom
- Separate the rooms out into the 5 = not guaranteed to solve the problem, and not enough time to redo assets.
- Skip the zooming and go straight to crossfades = Probably the solution if we get any complaints.
Probably should have gone with the 5 rooms as separate assets method, and zoomed the smaller asset up just a bit to fill the screen before crossfading. As it was my first Hype project, I was a little concerned with positioning and how layouts might work, so I locked everything to 16:9 to be safe.
Also, since the floating diamonds are a whole layer, it may have been more fun to make them interactive triggers for the questions, instead of the automatic flow.
This has gotten extremely positive feedback both internally and externally, so I’m sure I’ll have another opportunity.
Thanks for your help everyone!