1570387 - Some lines of text bounce during mouseovers

Status: NEW

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

Description

[(No longer employed by Mozilla) Aaron Klotz]

STR

1. Go to this link;
2. Move your mouse cursor just to the right of the Parameters sub-heading;
3. Slowly move your mouse down toward the bottom of the page.

Expected:
Text does not shift.

Actual:
When the mouse moves over certain parts of the page, some lines shift down a pixel or two, and then shift back up once the mouse leaves the region that triggered the original shift.

Comment 1

[Jeff Muizelaar [:jrmuizel]]

What is your devicePixelRatio?

Comment 2

[(No longer employed by Mozilla) Aaron Klotz]

(In reply to Jeff Muizelaar [:jrmuizel] from comment #1)

What is your devicePixelRatio?

1

Comment 3

[Jeff Muizelaar [:jrmuizel]]

I can't reproduce this on mac, linux or windows. Can you do a screenrecording?

Comment 4

[Jessie [:jbonisteel] pls NI]

Added it to the 69 list for now, until we have more info to determine priority

Comment 5

[Darkspirit]

Confirmed on Win10 1903/GTX1060. 2560x1440. Dell U2515H (117.5 dpi)

Comment 6

[Darkspirit]

Attachment: 2019-08-02 23-58-14.mp4

Comment 7

[Darkspirit]

Occurs with Basic, D3D11 (advanced layers), and WebRender. Even with scroll anchoring disabled.

Comment 8

[(No longer employed by Mozilla) Aaron Klotz]

Thanks for recording that!

Comment 9

[Jeff Muizelaar [:jrmuizel]]

Moving to layout because it's seems like it's more likely a layout problem.

Comment 10

[BugBot [:suhaib / :marco/ :calixte]]

The component has been changed since the backlog priority was decided, so we're resetting it.
For more information, please visit auto_nag documentation.

Comment 11

[Emilio Cobos Álvarez (:emilio)]

Attachment: Standalone test-case (not reduced)

I can repro this on Linux with sufficient zoom applied.

The hover is showing an anchor icon (which in this test-case it may be a tofu, since the font-face rules probably won't work).

I concur with Jeff that this is likely a layout bug.

Comment 12

[Darkspirit]

Attachment: 2019-08-03 00-41-45.mp4

Confirmed with Firefox 38. (Always looks a bit different, might depend on window size and zoom level.)

Comment 13

[Emilio Cobos Álvarez (:emilio)]

Attachment: font-for-reduced-testcase.woff2

Bugzilla refuses to upload with the right content-type, so not sure if this will work.

Comment 14

[Emilio Cobos Álvarez (:emilio)]

Attachment: Reduced test-case.

Comment 15

[Emilio Cobos Álvarez (:emilio)]

Attachment: Reduced test-case with the current font URI..

Since the Bugzilla font doesn't load because of CORS.

Hover over the "A" to see the effect. The only thing that does is toggling vertical-align.

Changing the font or something else makes it not repro, so it seems we need the Segoe UI font.

The vertically-aligned thing has some different font and uses some different line-height. So it seems possible that it somehow changes the height of its line.

Still, it seems quite weird to me that it doesn't shift the block (the paragraph) but only some lines of it, and only if some particular font is used... Jonathan, does something like this ring a bell?

Comment 16

[Emilio Cobos Álvarez (:emilio)]

Ok, so if I put a border around the paragraph, I can see that the whole paragraph shifts some, but still at some zoom levels some lines shift more than others, which is really weird.

Comment 17

[Emilio Cobos Álvarez (:emilio)]

(On the fence between "block and inlines" and "text and fonts" :))

Comment 18

[Jonathan Kew [:jfkthame]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #16)

Ok, so if I put a border around the paragraph, I can see that the whole paragraph shifts some, but still at some zoom levels some lines shift more than others, which is really weird.

This sounds like we're dealing with fractional-pixel line heights, and the baseline of different lines is then rounding to device pixels in inconsistent directions.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #15)

Since the Bugzilla font doesn't load because of CORS.

Just FTR, I think the reason it doesn't load is actually because of the redirection involved: the URL https://bugzilla.mozilla.org/attachment.cgi?id=9082788 does not link directly to the font file, but redirects to https://bug1570387.bmoattachments.org/attachment.cgi?id=9082788. If you use that URL in the @font-face rule, I think it'll probably load.

Comment 19

[BugBot [:suhaib / :marco/ :calixte]]

The priority flag is not set for this bug.
:mats, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 20

[BugBot [:suhaib / :marco/ :calixte]]

Clear a needinfo that is pending on an inactive user.

Inactive users most likely will not respond; if the missing information is essential and cannot be collected another way, the bug maybe should be closed as INCOMPLETE.

For more information, please visit auto_nag documentation.