1524897 - sup/sub elements are aligned differently in Chrome and Firefox with line-height and vertical-align.

Status: RESOLVED FIXED

(Core :: Layout: Block and Inline, defect, P3)

Description

[Thomas Wisniewski [:twisniewski]]

Attachment: test.html

It appears that Firefox and Chrome treat vertical-align:top differently for <sup> and <sub> tags with a tall line-height, as per the attached test-case.

Firefox aligns them to the top of the line-box, while Chrome aligns them as though they are inline elements (that is, as though vertical-align is no longer super).

Moreover, this only seems to happen with <sup> and <sub> tags. When I try a <span> that is inline or inline-block, both browsers render them similarly.

This is causing asterisks to appear too far up above their text on Deviant Art's age-consent form, as seen at https://webcompat.com/issues/25032

Comment 1

[Emilio Cobos Álvarez [:emilio]]

This is because of line-height: normal on the UA sheet for sup. If you apply line-height: normal to the sup it behaves the same in Chrome.

So it's a matter of removing:

https://searchfox.org/mozilla-central/rev/60c4067b1cbb0f94d7dc2d7cdfa27ed579817fee/layout/style/res/html.css#547

(And from the relevant sub rule I guess), and ensuring there's no fallout.

Maybe you're interested in giving it a shot?

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Also we should check if WebKit does something different I guess, though seems unlikely.

Comment 3

[Thomas Wisniewski [:twisniewski]]

Also we should check if WebKit does something different

I just checked, and Safari on OSX renders as Chrome does.

Maybe you're interested in giving it a shot?

Sure, I'll try to find time between webcompat diagnoses :)

Comment 4

[Thomas Wisniewski [:twisniewski]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=b9b4b70c37bafc94727b21faa1033989c509ac58

Comment 5

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1524897 - drop line-height:normal rule in html.css for <sub> and <sup> for interop. r?emilio

drop line-height:normal rule in html.css for <sub> and <sup> for interop.

Comment 6

[Thomas Wisniewski [:twisniewski]]

I'm not seeing anything worrying on that try-run, so I've gone ahead and requested review.

I'm not sure if we want to add a test-case for this or not? If so, should I be using a reftest with the Ahem font?

Comment 7

[Emilio Cobos Álvarez [:emilio]]

No need to use ahem, just a reftest like your test-case that renders the same as the same file but with <sub style="line-height: inherit"> / <sup style="line-height: inherit"> should be fine.

Comment 8

[Thomas Wisniewski [:twisniewski]]

Alright, I've added a reftest and updated the commit message to be a bit clearer. I'm doing another try-run here just in case: https://treeherder.mozilla.org/#/jobs?repo=try&revision=01ad672ce22b31ed466a99c447500a977f8ebd90

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/010180a16818
drop line-height:normal rule in html.css for <sub> and <sup> for interop. r=emilio

Comment 10

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/010180a16818