[Desktop] Youtube ytp-gradient-bottom visual bug

[SorenHolstHansen]

Description

On youtube the ytp-gradient-bottom div looks like the screenshot below. It appears on standard mode, cinema mode, full screen mode, not in miniplayer mode, and when youtube videos are embedded in other sites.

Steps to Reproduce

1. Go to youtube
2. Open any video, not in miniplayer mode
3. Hover over the video to make the control bar appear, and see the visual bug

Actual result:

The ytp-gradient-bottom div on youtube videos looks like this

It looks like that on standard showing, full screen, in cinema-mode (not in mini-player mode though) and when videos are embedded in other sites like reddit. It doesn't appear on Vimeo videos, and seems to only be youtube links. The visual bug only appears when the control bar is visible.

Looking at the html, the div looks like this:
<div class="ytp-gradient-bottom" data-layer="8" style="height: 201px; background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADJCAYAAADirlhQAAADi0lEQVQ4T0WTezTXdxjHX10mc1+LUe7JTKzMcatcx5BauRZNm4iGNJaJUE0SibDJpkVkLslapYtkK6UcCh1USG1Mv2nScikkO99fa/v88ZznnOd8zut9ntfnw1isVR6rit1LaQ02mcv+up5wzn1SsYZjnmVt9EdW3SPMLPcGfV9aqCKXVOvH4pzGQIxVZPZQ67c4hxW6Wc4cdSv1QF9RKhG7I80ihsfjavh00UEXFmTW9/J07MVLpnZY59EUdMqbcq+F37J8wexk7AtcS/Ao89RHMcWhANeS1mAqOwZGmZiMt0Yj/VoP4eaqciTV/vYF57rCzrLOUEmaN6ZP24lN/uoSWvtHxomrub8Fs9wbfQz9D3o4NEaseDBPVoIEW80DOOlkOqMzO9ke7YzrAZy8+9dXLFWTm8WMXb8+4MnzWCs05JNq8TuxthyvhYpS/4H0mCOVeFkYGKAkLe7uhHKmc7MpuTcCT+Fd3h6CyfcrdXn7zZlfY6upIMluOy0F9toXtCAaHo/DSkP+NWjbMnXSHQtbEG1dokaa0G063bGZM+uOe3GsrX+EmIvrf+J2iMlcZPcIG1dOrcPfKKfxtYUPtVCQfAXai712xnV6IywO8fG7WfX0RpzvIuxs5wCjE5PxWGukX6Pn723VrF/0zj4cClz1+GZ5kRulHvr/WriywUgZGTFIUHvK2yAbl6Jbn3PaxzCbho0n7xJqOk8WiQRbTQ446cwm+crv4ZgfuvmQoejqbgafTUwS/4vYwsofcX9vTooAEtS29RNZde8xURfExbeC2yGVPhgqSSdy2e/EHUJNc1eim+V8FDfh2lVxFomES3wmWGh/NBKD5eGmh6/U7rDOayLI+LtGAoXSNxRdTfdg1FLU0hwLadl02ofj7SGVdAyMbsfy8KpiIYsUiXZHmhENx1iinu5YiKveHEHtLhvyV5d4UOZZ5kmZp74iKVc3GJGzQjeL+t6I83Q9fradi91bzJi3/6NCWkTDMViqC+sMN1clzXF+Btd7n0azTF1+FgmXHjzh+YuXU0xNTU0JSVdR7F7aSnCljyHZDRs/QCW1zp+f1xpk0/BHhAWqaY7zyXDSycRZJ7OegJPeBijtc9DmLcnddmgpSM5k+jSEs9OG/GbRMONxNfcZjLrgS8Ua4QsV3fqTrVW+73PQZUEm9QGCqDOd4ofUzqPIJT9wM8hYhdQ6fyOUZSRm/AMeDYtweIBIPwAAAABJRU5ErkJggg==&quot;);"></div>
On firefox the ytp-gradient-bottom does not look like that, and the html looks like this:
<div class="ytp-gradient-bottom" data-layer="8"></div>

Expected result:

A youtube video with no visual bugs.

Reproduces how often:

Easily reproduced

Brave version

Brave	1.11.97 Chromium: 84.0.4147.89 (Officiel version) (64-bit)
Revision	19abfe7bcba9318a0b2a6bc6634a67fc834aa592-refs/branch-heads/4147@{#852}
OS	macOS Version 10.15.3 (Build 19D2064)

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields?
  Yes

[eljuno]

Related to strict fingerprinting protection (Brave Shields icon at URL bar). #10223 (comment)

[srirambv]

This is known and expected side effect of setting fingerprinting to strict. Closing the issue as wontfix as its expected. Please refer to the comment that @eljuno mentioned in the above comment.