1328031 - Elements stretch and twitch by 1px on http://www.bbc.com/ when I hover mouse over them

Status: RESOLVED WORKSFORME

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

Description

[arni2033]

>>>   My Info:   Win7_64, Nightly 49, 32bit, ID 20160526082509
STR_1:
1. Open http://www.bbc.com/
2. Hover mouse over any item in section "Latest Business News"
3. Move mouse away from that section

AR:  Step 2,3 - Red circle with number inside stretches by +1px vertically, then goes back to normal
ER:  Red circles should stay still


STR_2:
1. Open http://www.bbc.com/
2. Hover mouse over the last item in section "From Our Correspondents"
3. Move mouse away from that section

AR:  Step 2,3 - Author's name inside the item teleports down by 1px, then goes back to normal
ER:  All text labels should stay still

Note:
 In STR_2 FF window should be maximized and the hovered item should be located
 near the bottom of the screen and fully visible on the page.
 
This is regression. Nightly 2015-01-01 is unaffected, Nightly 2016-05-26 is affected.

Comment 1

[Alice0775 White]

https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=7641104770a80015e63597b58cb312fefcbd9ab4&tochange=621ab19e86db28c38bbbf9119fbf6831ea344c54

Comment 2

[Alice0775 White]

disabled HWA seems to fix.
so I think component is Graphics: Layers.

Comment 3

[Jerry Shih[:jerry] (UTC+8) (inactive)]

In comment 1, it seems related to handling preserves-3d at compositor.

Comment 4

[Thinker Li [:sinker]]

I think it is very possible to be inconsistency in anti-aliasing setting.
The stretch will be gone if you change transform property of |.csstransforms .top-list-item__bullet| to -51% or alike.  It is a typical phenomenon of anti-aliasing.

Comment 5

[Mike Taylor [:miketaylr]]

ni? to see if this still repros for me, and if so, let's give BBC the workaround in Comment #4.

Comment 6

[Mike Taylor [:miketaylr]]

Attachment: bbc twitch

Comment 7

[Mike Taylor [:miketaylr]]

Yeah, still an issue. To re-cap,

1) visit bbc.com
2) hover over items in "Latest Business News" section 

Expected: nothing twitchy
Actual: twitchy movement in numbered list item numbers (see uploaded gif)

Recommended fix:

.csstransforms .top-list-item__bullet {
    ...snip...
    -webkit-transform: translateY(-51%);
    -moz-transform: translateY(-51%);
    -ms-transform: translateY(-51%);
    -o-transform: translateY(-51%);
    transform: translateY(-51%);
}

Adam, could you get in touch with BBC via our ML, please?

Comment 8

[Adam Stevenson [:adamopenweb]]

Contacted via the mailing list.

Comment 9

[Sergiu Logigan [:sergiu]]

The issue is a minor cosmetic one. Scaling down on Importance.

Comment 10

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 11

[Jeroen Kruis]

Works for me, ff97 on MacOS 12.1 and ff97 on Win10Pro.