Gabi Cheta [:Gabi] Desktop QA Reporter
	Description • 6 years ago

[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

	Gabi Cheta [:Gabi] Desktop QA Reporter
	Comment 1 • 6 years ago

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

	Ryan VanderMeulen [:RyanVM]
	Comment 2 • 6 years ago

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

	Alice0775 White
	Comment 3 • 6 years ago

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

	Alice0775 White
	Comment 4 • 6 years ago

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

	Bryce Seager van Dyk [:bryce] (he/him) - Not reading bugmail
	Comment 5 • 6 years ago

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.

	Xidorn Quan [:xidorn] UTC+11
	Comment 6 • 6 years ago

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.

	Xidorn Quan [:xidorn] UTC+11
	Comment 7 • 6 years ago

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.