1886480 - Headlines on the mobile version of arstechnica.com have odd spacing

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect, P3)

Description

[Dennis Schubert [:denschub]]

Attachment: Screenshot showing this issue. Left is before, right is after

With bug 1883896 in effect (layout.css.h1-in-section-ua-styles.enabled=false, default in Nightly only), the headlines on https://arstechnica.com have an odd spacing.

The headlines are a link inside an h1, and they do style the font size and line height of the <a>, but not the <h1>. With the old UA stylesheet in place, the rule that would set the font size was

:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section)
h1 {
  font-size: 1.00em;
}

That rule is now gone in Nightly, falling back to the default font-size of 2em, which is what's driving the increase in effective line height.

We could easily ship an intervention containing

body.mobile-view .archive-list li article.in-column h1 {
  font-size: 1em;
}

but given this is a change in the UA stylesheet, this could have a widespread effect.

Comment 1

[Dennis Schubert [:denschub]]

Simon, given we have no commitment from other vendors to ship a similar thing, I don't think we can be the leader here - this has the potential of breaking a lot of things in annoying ways. What's your opinion here?

Comment 2

[Simon Pieters [:zcorpan]]

Indeed we can't go ahead and ship this to stable without other browsers onboard, and ideally ship at the same time.

If we get many bug reports about this while affecting only Nightly, then we should conclude this as a failed experiment and revert the change.

Comment 3

[Simon Pieters [:zcorpan]]

I've tried contacting them via https://arstechnica.com/contact-us/

Comment 4

[Simon Pieters [:zcorpan]]

Got a reply:

Hi Simon,

Thanks very much for sending this along. We have a new redesign rolling out very soon which will explicitly set margins.

Cheers,
Ars

Comment 5

[Simon Pieters [:zcorpan]]

Their current CSS sets margin: 0 on h1, but doesn't set font-size so the issue is still present. I've contacted them again.

Comment 6

[Simon Pieters [:zcorpan]]

I forgot to update here, but I received a reply:

Hi there,

We have an update coming very soon that should address this font-size issue as well.

Thanks for looking out,
Ars

It looks like the new update has rolled out, and there's now only one h1 in main but it has class="sr-only" and so isn't rendered visually.