Safari iOS 15 disrupts display
Clipcentric ads auto-detect for alignment settings, but publishers need to implement CSS env()
by Clipcentric
July 26, 2021

Digital publishers seem to be forever facing a new mandate or design change from technology providers that threatens to upend their website and with it, their ad revenue. Google is often the culprit: most recently it refused to render ads that are too “heavy” in Chrome, and began penalizing websites for content shifting too much on the page after loading ads. This time, however, Apple is a thorn in the side of publishers, with its public beta of Safari iOS 15.

Safari, as the default web browser for all iPhone users, represents a significant share of mobile traffic to websites, and the pending revamp in iOS 15 introduces a UX issue publishers can’t ignore: the floating tab bar. Many websites have bottom-aligned elements -- action buttons like Twitter’s that let you draft a new tweet, terms or cookies acceptance and acknowledgements as a result of GDPR, and, of course, ads. Video player ads often anchor to the bottom of the screen, as do popular formats like mobile adhesion.

For publishers who don’t correctly code their pages using CSS safe environment variables, Safari’s new floating tab threatens to completely cover up these key elements. The env() CSS function, in tandem with safe-area-insert-bottom, will ensure that bottom-aligned elements in Safari will move up and out of the way when the floating tab bar appears, eliminating overlap. (Samuel Kraft has a great primer here).

Clipcentric ads are already set for iOS 15 

At Clipcentric, we know that it can take a while (and sometimes a committee) to get changes like this in place on a publisher’s site, so just in case, we’ve already built and deployed a way to correct for this new Safari element ad-side. Ads built in Clipcentric can align to browser-safe areas, and even detect if CSS environment variables are set on publisher-defined ad slots. If not, it can set them on-the-fly if needed. Ad sales and ad ops teams can continue to sell, create, and run popular mobile adhesion and video formats via Clipcentric knowing that our tool accounts for browser alignment.

While our publishers can be sure that Clipcentric ads will adjust out of the way of the floating nav bar, regardless of whether they’ve gotten around to updating page code on their sites with CSS safe environment variables, publishers shouldn’t assume that the same is true for cookie banners or other page elements that that they run, and should confer with their third party providers to make sure each element correctly sets page positioning.

Staying on top of industry pivots

This isn’t the first time Clipcentric has been out in front of major changes that impact publishers -- it’s something we pride ourselves on! We figured out inline mobile video even before OS solutions were available. We built a maps solution when Google Maps for ads got way too expensive for our clients. We created an Amp ad editor, developed cookie-less ad serving, and rolled out GDPR consent even before consent strings were standardized. 

We’re always happy to talk through technological ad challenges and develop custom solutions -- our team has been around the display ad industry for decades and we know it inside and out. Get in touch with us -- even if you’re not yet a Clipcentric partner -- and we can help you solve your most complex challenges when it comes to high-impact ads.




More Clipcentric Resources