1465757 - Play button overlaps/greys out the clip suggestions on CNN

Status: NEW

(Core :: Layout, defect, P3)

Description

[Gabi Cheta [:Gabi] Release Desktop QA]

Attachment: CNN.png

[Affected versions]:
- 61.0b10-build1

[Affected platforms]:

- Windows 10x64
- macOSX 10.13
- Ubuntu 14.04
- Windows 8.1x64

[Steps to reproduce]:

1. Launch Firefox
2. Navigate to https://edition.cnn.com/2016/10/10/us/weather-matthew/index.html
3. Go to the end of the video using the navigation bar
4. Observe the underneath clip suggestions (Must watch videos)


[Expected result]:
- Video suggestions should be displayed properly

[Actual result]:
- Play button overlaps/grays out the clip suggestions (see attachment)

[Regression range]:
Will return with regression range asap

Comment 1

[Gabi Cheta [:Gabi] Release Desktop QA]

Pushlog from Mozregression: https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=996deca6cc2d893514d9552d9097365ea7de71e6&tochange=246493ebf8627765eaa25e1ad4ce91c7acff8354

Comment 2

[Ryan VanderMeulen [:RyanVM]]

I'm having a hard time seeing an obvious culprit in that range :(

Comment 3

[Alice0775 White]

Hmm I can reproduce the problem on Win10 ESR52/ESR45 too.
(BTW, I can only reproduce problems on Google Chrome68 while/after the "save as" command is in progress.)

Comment 4

[Alice0775 White]

(OR, I can reproduce problems on Google Chrome68 when inspect the overplayed gray element.)

Comment 5

[Bryce Seager van Dyk (:bryce)]

Looks like the div with class "media" is getting overlapped by the div with class "cd__content". Chrome will do the same thing after various actions (as noted above). To add to these scenarios, I Chrome do the same thing upon resizing the window.

I think this is in the layout/styling domain, am moving this to layout.

Comment 6

[Xidorn Quan [:xidorn] UTC+11]

This problem can be reproduce on Chrome when the viewport area is resized, so I suppose they have some broken calculation code which gets triggered on Firefox somehow, but only triggered on Chrome when resized.

Comment 7

[Xidorn Quan [:xidorn] UTC+11]

So the issue here is on the attribute `data-eq-state="xsmall small medium"`. With this attribute set on their ancestor, the .cd__content elements would match `[data-eq-state$="medium"].cd--vertical.cd--has-media:not(.cd--media__video-demand):not(.cd--media__go-free-preview) .cd__content` which uses `position: absolute; left: 0; bottom: 0;`, while without it, it would use just `position: relative;`.

On Firefox, this attribute is always set from the very beginning, while on Chrome, it is only set when resized.