You are probably reaching to this page, as your animated HTML5 banner runs slow in Safari. That might happen on the Adpiler preview pages, but might also happen on other ad servers or pages. We have tested with different scenarios to find the root cause.
Note: if you are not interested in the research, you can directly skip to the conclusion in the last paragraph.
Scenario 1: Loading banner on Adpiler preview page
Let’s start with the beginning. One of our great customers created a preview page with an HTML5 banner. We will clock the duration of the animation by hand. When the banner was loaded in Chrome, the duration of the animation was 11 secs. Loaded in Safari, it was even visible by eye that the animation took longer: 20 secs.
- Chrome: 11 seconds
- Safari: 20 seconds
Scenario 2: Direct loading of banner ad
Our first step is to take away everything around the banner. This means we load the banner directly from the URL on our CDN. Interesting result: the animation takes in both Chrome and Safari 11 seconds. Would that mean that some other code on the Adpiler preview pages causes the slowdown?
- Chrome: 11 seconds
- Safari: 11 seconds
Scenario 3: Loading banner ad in an iframe on ’empty’ page
We have seen before that an animation behaves differently when it’s loaded within an iframe. So our next step is to create a blank page, with just an iframe that loads the animated HTML5 banner ad from our CDN. When we request the banner ad in Chrome and Safari, we see the same duration as on the Adpiler preview page.
- Chrome: 11 seconds
- Safari: 20 seconds
We can now conclude that the delay in Safari is caused by loading the banner ad within an iframe. After some research on the web, we were pointed in the direction of cross-origin iframes. Cross-origin iframes are iframes on a website that are loaded with content from another domain. For example: on domain1.com is an iframe that loads content from domain2.com.
Scenario 4: Loading banner ad in an iframe on ’empty’ page from the same domain
We use the same setup as in scenario 3, but we don’t load the banner ad from our CDN, but from the same test domain. Now we see that we wanted to see: Chrome and Safari both have a similar duration of the animation.
- Chrome: 11 seconds
- Safari: 11 seconds
Conclusion
As we see from our test scenarios, the animation slows down in Safari when the banner ad is loaded in an iframe from another domain. Safari seems to throttle the RAF (requestanimationframe) when the iframe is cross-origin. The throttle will be disabled when a user will interact with the banner, like clicking, but even right-mouse click would do. For the use case of a banner ad, that isn’t a real solution.
Now we know the root reason for this delay, we would like to have a solution as well. Unfortunately, there’s no fix or even a workaround. It’s a decision from Apple, and if they are not changing their opinion, animation in banner ads might appear slower in Safari then in other browsers.
Can this be solved on Adpiler?
Right now, banner ads on the preview pages of Adpiler are loaded in an iframe from our CDN (Amazon S3). There might be 1 solution: we could load the banner from our own domain, instead of using the Amazon S3-domain. There are 2 reasons why that wouldn’t make sense:
- This could work for preview pages on the adpiler-domain, starting with preview.adpiler.com. But as all our plans have white-labelling included, most of the preview pages have a custom subdomain.
- After Adpiler, the banner ads will be (in most cases) served from an ad server. Those ad servers have different domains then the publisher anyway. That would mean, that in real-life we have to deal with this delay in Safari anyway.
Jorrit
Founder Adpiler
