Elements not showing up in IE and Microsoft Edge on Banner ads

Advertising
1

I’m getting some strange problems with banner ads.

https://www.leoketel.com/client/jrv6-support/

This ad works on Safari and Chrome for Mac, iPhones, Samsung tablets, and Chrome on a PC. I know Internet Explorer and Edge are special cases (Thanks, Microsoft), but shouldn’t something that works once work again? Also, I know this isn’t a Hype issue.

To see what’s going on, compare the link in Chrome to Edge. Text elements do not animate up from the bottom, they just appear. That would be annoying, but fine. The really bad thing is that the last text block (June 9th-17th…) doesn’t show up at all in Edge or IE. I’ve tried everything I can think of, but can’t get it to work.

TL;DR
I started this animation with SVGs from Illustrator. It worked on everything I tested but Edge. And it worked on Edge, except for the last text block. Then I outlined the text and made new SVGs. When that didn’t work, I changed all SVGs to transparent PNGs thinking that the SVGs might be the problem. Same problem in Edge. I replaced transparent PNGs of the RVs and logos with a moving jpeg. I also re-saved and renamed all the files in case they were somehow corrupted. -_-

jsv amination.zip (190.2 KB)

2

It looks like this is a rendering bug with those browsers and the Filter Effects. If you click “Reset Filters to Default” on all the elements then the animation will work correctly.

I’ve filed this to see if there are workarounds we should be doing in Hype for this.

Since the elements themselves are static, for the time being you may want to render them in an image editor.

1 Like