Open Bug 1570387 Opened 1 year ago Updated 1 year ago

Some lines of text bounce during mouseovers

Categories

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

Desktop
Windows 10
defect

Tracking

()

Tracking Status
firefox-esr60 --- wontfix
firefox-esr68 --- affected
firefox68 --- wontfix
firefox69 --- affected
firefox70 --- affected

People

(Reporter: aklotz, Unassigned, NeedInfo)

References

()

Details

(Whiteboard: [sci-exclude])

Attachments

(6 files)

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.

What is your devicePixelRatio?

Flags: needinfo?(aklotz)

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

What is your devicePixelRatio?

1

Flags: needinfo?(aklotz)

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

Flags: needinfo?(aklotz)

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

Blocks: wr-69
Priority: -- → P3

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

Has STR: --- → yes
Flags: needinfo?(aklotz)
Hardware: Unspecified → Desktop

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

Thanks for recording that!

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

No longer blocks: wr-69
Component: Graphics: WebRender → Layout

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.

Attached video 2019-08-03 00-41-45.mp4

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

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

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?

Flags: needinfo?(jfkthame)

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.

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

Component: Layout → Layout: Block and Inline

(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.

Flags: needinfo?(jfkthame)

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

For more information, please visit auto_nag documentation.

Flags: needinfo?(mats)
Priority: -- → P3
Whiteboard: [sci-exclude]
You need to log in before you can comment on or make changes to this bug.