1326606 - Applying transform scaleY(0.6) causes some elements to move horizontally (ads rectangles in video controls on Youtube twitch on hover)

Status: NEW

(Core :: Layout, defect, P3)

Description

[arni2033]

>>>   My Info:   Win7_64, Nightly 49, 32bit, ID 20160526082509
STR_1:
1.A) Open https://www.youtube.com/watch?v=PNFAXtn-gYU or other video that has yellow rectangles (ads)
1.B) Extract my carefully saved "testcase 1" in a folder with short full name. Open the .htm file
2. Maximize Firefox window on 1366x768 screen OR set width to 1366 in responsive design mode
3. Move mouse pointer outside of the black video area on the page
4. Hover mouse over the video controls (containing several yellow rectangles)

AR:  After Step 4 some of the rectangles twitch to the left by 1px. Their numbers: 1, 2, 3, 5, 6
ER:  After Step 4 all yellow rectangles should not move horizontally

Note:
1) IMPORTANT: STR_1 is for Windows 7 specifically, because scrollbars are 11px wide on Win7.
   To reproduce this on other OSs (I guess) you should add Step 0:
   0. Open Responsive design mode (Ctrl+Shift+M), set width to odd number like 1279px
2) Last time I checked this in inspector, there was an element that applys "transform:scaleY(0.6);"
   when video controls aren't hovered, and that causes yellow rectangles to twitch horizontally.
   It happens even if I don't interact with the page and only add/remove that rule via inspector.