I’ve been using Hype to build ads for a while now and I’ve noticed there’s a lot of inconsistencies with an ad’s appearance across different browsers. I usually use Chrome 99% of the time but whenever I’m testing the same demo in Safari or FireFox, the elements of my animation, especially text look blurry, cut off, or go completely missing.
To preface, I’m designing these ads in Photoshop and then slicing up the elements I need to animate as PNGs with transparent backgrounds. Once I’m done animating I obviously export to HTML5 and upload my animation to an FTP so clients can review it. Everything looks great when I preview the demo in Chrome but sometimes someone else will view the same demo in Chrome or other browsers and suddenly it looks weird, like the example below.
In this example, you would think it’s an issue with masking but I’ve checked the file and as I’ve mentioned before it looks right on my computer but only when using Chrome. So has anyone out there also been experiencing this kind of glitch and what can I do to troubleshoot or avoid this issue entirely?