Amphtml: transform: translate(-50%, -50%) causes blurry text in amp-ad

[jeffjose]

amp-ad > iframe has transform: translate(-50%, -50%) that causes blurry text.

In the attached image, the top section is inside amp-ad which has transform that causes blurry text. The bottom section doesnt, and is crisp.

Removing the transform causes blurriness to go away.

[jeffjose]

Repro URL: axios.com

Seems to be widely known issue.

[lannka]

The CSS was added in #8012 to center the ad. @glevitzky do you think this rule is necessary?

[KasianaMac]

Hi folks - just flagging that this is a pretty frustrating issue for us (and we are AMP evangelists! https://blog.amp.dev/2020/04/07/people-behind-the-code-the-axios-ascent/). @glevitzky, is this something that you can address soon?

[glevitzky]

Hi Kasiana, apologies for the delay. I'll try to prioritize this more this week.

[glevitzky]

I'm in favor of removing the offending CSS.

I've tested on a variety of pages with different setups including multi-size (including case where creative is much smaller than the ad element), single size, and fluid. Also tried with AdSense. I didn't see any difference in how creatives are rendered with or without the CSS.

The CSS was added to AdSense in https://github.com/ampproject/amphtml/pull/8012 and to DoubleClick in https://github.com/ampproject/amphtml/pull/8724. Someone (me) didn't properly document why this particular change was made, so I'm not quite sure why it was done to begin with.

My only concern is that there's no way to properly experiment with CSS changes (AFAIK). WDYT, @lannka?

[jeffjose]

Since @lannka is out, @calebcordry / @powerivq can you chime in?

[calebcordry]

@powerivq Didn't you run some sort of experiment for FIE css? Would it be possible to use the same process here?

[powerivq]

@calebcordry Yeah I can create an AB test for that.

[KasianaMac]

Thanks so much folks! @powerivq, do you have a rough timeline for when you might be able to run that test? I'd like to be able to let my team know when this might be updated.

[powerivq]

I created the PR for the removal of that CSS here https://github.com/ampproject/amphtml/pull/27816

@KasianaMac I believe you can write custom CSS to override it to have it fixed on your site. Once it's fully rolled out, you can remove the CSS.

[KasianaMac]

Awesome, thanks @powerivq! I'll watch to see when your PR merges. Really appreciate the speedy help!