1882026 - Play button glitch in https://plus.nasa.gov/video/jpl-and-the-space-age-destination-moon/ (with css 'zoom')

Status: NEW

(Core :: Layout, defect)

Description

[Alice0775 White]

Attachment: Nightly125.0a1 vs MS Edge

Steps to reproduce:

1. Open https://plus.nasa.gov/video/jpl-and-the-space-age-destination-moon/

Actual results:
Layout of playback button is broken.

Comment 1

[Alice0775 White]

Attachment: about:support

Comment 2

[Daniel Holbert [:dholbert]]

I can reproduce. The playback button uses CSS zoom: 30% to scale itself down, which seems to be doing something in Chrome but not in Firefox.

(If I disable that property in Chrome, then their layout matches ours. If I disable it in Firefox Nightly, there's no rendering change.)

Comment 3

[Daniel Holbert [:dholbert]]

Also, FWIW, this doesn't seem to be a regression; I see the same results in e.g. Nightly 2022-09-01 (v106.0a1)

Comment 4

[Daniel Holbert [:dholbert]]

(The "share" button has the same issue, though to a lesser extent; it's got zoom:50% which we ignore.)

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (slightly reduced)

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: testcase 2

Comment 7

[Daniel Holbert [:dholbert]]

emilio, it looks like we've got an inconsistency (with respect to Chrome at least) RE how we resolve em units, when the font-size is inherited vs. specified explicitly on the same element -- see testcase 2. Do you know if this is a known issue with zoom, and is it something we can address?

Comment 8

[Emilio Cobos Álvarez [:emilio]]

Yeah this is basically https://github.com/w3c/csswg-drafts/issues/9397