Open Bug 1465757 Opened 4 years ago Updated 4 years ago

Play button overlaps/greys out the clip suggestions on CNN

Categories

(Core :: Layout, defect, P3)

defect

Tracking

()

Tracking Status
firefox-esr52 --- unaffected
firefox-esr60 --- fix-optional
firefox60 --- unaffected
firefox61 - fix-optional
firefox62 - unaffected

People

(Reporter: Gabi, Unassigned)

Details

(Keywords: regression, regressionwindow-wanted)

Attachments

(1 file)

Attached image 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
I'm having a hard time seeing an obvious culprit in that range :(
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.)
(OR, I can reproduce problems on Google Chrome68 when inspect the overplayed gray element.)
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.
Component: Audio/Video: Playback → Layout
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.
Priority: -- → P3
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.
You need to log in before you can comment on or make changes to this bug.