Inconsistencies with Hype Animation Across Browsers

Browser & Compatibility
1

Hi there,

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?

2

It’s pretty hard to tell without checking out a document – can you create a simple example and share?

Do you only see this weird issue when accessed from the web or do you also hit it when checking it out in other browsers locally?

3

Sure thing, I’ve attached an example of the banner ad I’m currently working on. Tell me if you’re seeing the same issues when you go to preview it locally. example.zip (831.6 KB)

It looks totally fine when I’m accessing the demo from the web as well as locally but only in Chrome, other browsers distort the copy.

4

Hi Lauren!

Your source PNG file (“txt-01.png”) is clipped.

The image below is a 300% magnification (Photoshop), along with your example below that. I put in the black background surrounded by red for ease of viewing. Curiously, when I gave the image a “padding-top” of 1px (in Hype) the clipping issue disappeared when previewed in (any) browser.


Also I noticed you are scaling your "text" PNG files - it might produced cleaner results to go with 100% scale at the needed size.
1 Like
5

did you try to check-off hypes imageoptimization?

2 Likes
6

@h_classen

Bingo! Gave that a go and it worked. The 2x Retina file (“txt-01_2x.png”) is not clipped. I’m wondering if that gave rise the variable reports of working/not working if some were using mobile.

7

Cool, checking off “automatically optimize when exporting” fixed the issue with the PNGs! How did you know that would work? I really want to understand why Hype does this!

Also, have you ever dealt with Hype changing the color of an SVG file when previewing locally?

8

just work with a bit of whitespace around letters within pngs and your good to go ... though pixelated formats may not be the best choice for text as those are not lossless scaleable.

this is not right clear (when, where, what) but should lead in an colormanagementissue in your working environment. as this'll fast gets theoretical and confusing i'm off here :wink: