So for a banner set I’m creating I’ve to animate a diagonal masks, to hide/show certain content.
I am aware with the group option and with using overflow hidden it is possible to mask, however in default that’s only for straight square rectangle masks. I’ve looked at @MaxZieb his tool for A vector ClipPath in Hype However, I couldn’t use it since IE and Safari do not support this yet, and we need the inventory on those browsers.
That makes extra groups to rotate and use as mask with overflow:hidden, and then inside that group counter rotates the content so it straightens out. I decided to go with this work around
It all worked fine in the end (Although, very time-consuming and non-efficient due to diagonally moving items). However, it seems that the content in these groups that are rotated are losing image quality. I’m using decent quality images, and a web font, and somehow the images that are in the mask look very unsharp.
Here are some examples:
The 300x600 and 970x250 do look somewhat sharp (But if you look at the text you see it’s a bit blurry too)
Link: 970x250
Link: 300x600
But the smaller formats 300x250 and 728x90 the quality noticeably worsens.
Link: 728x90
Link: 300x250
What could be the cause of this? And more important what could be the solution to fix this?
(I can't share the project file publicly, however, I can share it in DM for the ones interested)
Would you be able to attach a zip of your .hype documents? It would be easier to see the structure and suggest based on that.
Also do you mind taking a screenshot and pointing out the unsharp element? Perhaps my eyes are going bad, but nothing particularly stands out to me on macOS 11.3/Safari 14.1. Are you on a retina or non-retina display?
I've tried the same method with some basic elements with skewing (if only i knew this before, it is so much more easy to position things with this). However, no difference with the image quality.
Image left is in the mask groups, and the same text on the right is out of the mask group.
Here is the snapshot of the unsharp elements in every banner (but most noticeable in the 300x250 and the 728x90). And i'll send you the project file in PM.
I recommend trying unchecking Use WebKit graphics acceleration in the Document Inspector. That seemed to help text rendering on Chrome for me, since it uses a different rendering mode that probably favors re-rendering vs. a compositing with a double rotation.
If that doesn't help, I'll need to know what OS/browser you are using and if you are using a retina display to reproduce the results. Getting the 300x250 document would also help, since it is very hard for me to see the difference.
Yes, my MacBook Pro has a retina screen and there its hard to see. But my external screen for my mac is a regular 1920x1200 monitor, on which is more visible. The same on the two non retina monitors attached to my desktop.
But good news, Thanks allot Jonathan! the WebKit graphic acceleration was the cause. By disabling this it solved it
What exactly does this do? So i know for the future, also are there certain performance things lost now I turned it off?
Use WebKit graphics acceleration adds a 0 degree 3D rotation to elements which is a hint to some browsers (Safari/Chrome) to composite on the GPU. This treats elements more like bitmaps, so if they scale/skew/rotate they will perform these transformations starting with a rendered element. Since there are only pixels to work with, they may lose some fidelity across these transformations.
If WebKit graphics acceleration is unchecked, then calculations and rendering is made on the CPU instead. This path causes re-rendering at the final destination, which keeps things generally sharp. This can lead to slower performance though.
It is a bit more complex than this -- there are many different types of rendering paths and pipelines made by the browsers. Also Hype will often override settings to try to ensure crisp text or avoid browser rendering bugs.
Unfortunately we found there's no way to automatically always do the right thing for users, hence it being exposed as an option.
