Animation Issues in iOS: Both Graphics and Google Web Font Elements Appearing and Disappearing

[Christopher Stashuk]

I have an HTML5 animated banner that I designed in GWD that is having issues with animated movements.  Just incase it was a local server issue, I went ahead and published the verified banner to Google Adwords.  Here is the link:

https://adwords-displayads.googleusercontent.com/da/b/dabAdPreview?templateId=419&outputFormat=HTML5&width=300&height=250&visibleUrl=www.graceland.com/&destinationUrl=https://www.graceland.com/&irsKey=3098792896761954304&hl=en_US&ad=182586635444&adGroup=18008239693&ocid=7042080520&showMulPreview=true&s=13&sig=ACiVB_x-96nezXv3iIh9RkU-Bwsp-Q-s7A

The banner performs flawlessly in all environments except for iOS where elements of the headlines are missing and the pop back in during the initial blue and red messaging as well as missing the "THE MANSION" headline until it is almost animated off stage.  What is weird is that other images and Google font based elements are animating correctly.  Additionally, the initial blue and red headlines work and don't work upon both browser refresh and/or the loop it performs before stopping at the 30sec mark.  I even built a second banner size and get same weird results:

https://adwords-displayads.googleusercontent.com/da/b/dabAdPreview?templateId=419&outputFormat=HTML5&width=300&height=600&visibleUrl=www.graceland.com/&destinationUrl=https://www.graceland.com/&irsKey=-6677466363096727552&hl=en_US&ad=182665561113&adGroup=18008239693&ocid=7042080520&showMulPreview=true&s=13&sig=ACiVB_wMXwYH8fNFwu1VsVp5ZDosDrv9Cw

Is anyone else experience motion/animation issues with the GWD banners in iOS?  If so, any workarounds are solutions would be greatly appreciated.

Thanks in advance,

Christopher

[Sukhbir Kaur]

Hi Christopher,

I was able to reproduce the issue in iOS with the above links.Can you please send us the author file (not the published file)   so we can debug it internally?  You can put the zip file on drive or somewhere and share it with me either privately or to gwd-s...@google.com.

Thanks

Sukhbir

(Google Web Designer Team)

[ljcar...@gmail.com]

Did this ever get debugged? We are having the same issues..

[Samantha Lee]

Hi Sukhbir Kaur ,

I am having an issue that my GDN banner (created in GWD) animation looks fine in my MacBook Pro 2016 (macSierra version 10.12) and my android phone. But the animation looks weird on iPhone.... Can you please help me ? This is very urgent ! Thank you!!!

Regards,
Samantha Lee

[littlet...@gmail.com]

Having a similar issue (with video not working on i0S but fine on desktop and Android). Can you help?

[littlet...@gmail.com]

[me...@meganmadethis.com]

Just wanted to bump this issue if anyone is checking these threads.

I'm having very similar problems. The animations work great everywhere... except specifically iOS 10.x (and presumably lower, but that's my lowest available testing device).

I also found that if I am constantly tapping/scrolling that ad preview page on my iOS 10.3.3 iPad, the animations will all run. I was worried that the issue was with GWD not writing prefixes correctly, but I feel like this indicates that it's more of a performance issue, maybe?

Either way, annoying problem. Probably happening to a lot of people who just don't happen to check on an older iOS device. Would love it if this issue got some attention.

[San Khong]

Hi Megan,

Do you use animation delay or pause event anywhere in your animation? It is a known issue that Safari on iOS does not handle them correctly. Would you please share the author file with us so we can suggest a workaround to the issue? 

Open the file in Google Web Designer and select File > Save as zip... and share the file with us. If you are unable to share it here, please send it to gwd-s...@google.com.

Thanks,

San

Google Web Designer team