URL: https://www.youtube.com/
Browser / Version: Firefox 59.0
Operating System: Mac OS X 10.12
Tested Another Browser: Yes
Problem type: Something else
Description: YouTube shows lower quality thumbnail images on Firefox vs. Safari (retina?)
Steps to Reproduce:
Reopening #13663
Triager may need to use a retina mac or have the Firefox window on a high DPI display.
Open YouTube home page in private mode.
The thumbnail for https://www.youtube.com/watch?v=LymuZ8abvmc is:
Firefox:
<a id="thumbnail"
class="yt-simple-endpoint inline-block style-scope ytd-thumbnail"
aria-hidden="true"
tabindex="-1"
href="/watch?v=LymuZ8abvmc">
<yt-img-shadow class="style-scope ytd-thumbnail no-transition"
style="background-color: transparent;"
loaded=""><img id="img"
class="style-scope yt-img-shadow"
src="https://i.ytimg.com/vi/LymuZ8abvmc/hqdefault.jpg?sqp=-oaymwEWCNIBEHZIWvKriqkDCQgBFQAAiEIYAQ==&rs=AOn4CLC3lIBEu35kq-35aszmJVD6Zjv7Fw"
width="210"></yt-img-shadow>
<div id="mouseover-overlay"
class="style-scope ytd-thumbnail"></div>
<div id="overlays"
class="style-scope ytd-thumbnail">
<ytd-thumbnail-overlay-time-status-renderer class="style-scope ytd-thumbnail"
overlay-style="DEFAULT"><span class="style-scope ytd-thumbnail-overlay-time-status-renderer"
aria-label="6 minutes, 59 seconds">
6:59
</span></ytd-thumbnail-overlay-time-status-renderer>
<ytd-thumbnail-overlay-toggle-button-renderer
role="button" tabindex="0"
class="style-scope ytd-thumbnail"
aria-label="Watch later">
<yt-icon class="style-scope ytd-thumbnail-overlay-toggle-button-renderer">
<svg viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
style="pointer-events: none; display: block; width: 100%; height: 100%;"
class="style-scope yt-icon">
<g class="style-scope yt-icon">
<path d="M12 3.67c-4.58 0-8.33 3.75-8.33 8.33s3.75 8.33 8.33 8.33 8.33-3.75 8.33-8.33S16.58 3.67 12 3.67zm3.5 11.83l-4.33-2.67v-5h1.25v4.34l3.75 2.25-.67 1.08z"
class="style-scope yt-icon"></path>
</g>
</svg>
</yt-icon>
<paper-tooltip id="tooltip"
class="style-scope ytd-thumbnail-overlay-toggle-button-renderer"
role="tooltip"
tabindex="-1">
<div id="tooltip"
class="hidden style-scope paper-tooltip">
Watch later
</div>
</paper-tooltip>
</ytd-thumbnail-overlay-toggle-button-renderer>
</div>
</a>Safari:
<a id="thumbnail"
class="yt-simple-endpoint inline-block style-scope ytd-thumbnail"
aria-hidden="true"
tabindex="-1"
href="/watch?v=LymuZ8abvmc">
<yt-img-shadow class="style-scope ytd-thumbnail no-transition"
loaded=""
style="background-color: transparent;"><img id="img"
class="style-scope yt-img-shadow"
width="210"
src="//i.ytimg.com/vi/LymuZ8abvmc/hqdefault.jpg"></yt-img-shadow>
<div id="mouseover-overlay"
class="style-scope ytd-thumbnail"></div>
<div id="overlays"
class="style-scope ytd-thumbnail">
<ytd-thumbnail-overlay-time-status-renderer class="style-scope ytd-thumbnail"
overlay-style="DEFAULT"><span class="style-scope ytd-thumbnail-overlay-time-status-renderer"
aria-label="6 minutes, 59 seconds">
6:59
</span></ytd-thumbnail-overlay-time-status-renderer>
<ytd-thumbnail-overlay-toggle-button-renderer
role="button" tabindex="0"
class="style-scope ytd-thumbnail"
aria-label="Watch later">
<yt-icon class="style-scope ytd-thumbnail-overlay-toggle-button-renderer">
<svg viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope yt-icon">
<path d="M12 3.67c-4.58 0-8.33 3.75-8.33 8.33s3.75 8.33 8.33 8.33 8.33-3.75 8.33-8.33S16.58 3.67 12 3.67zm3.5 11.83l-4.33-2.67v-5h1.25v4.34l3.75 2.25-.67 1.08z"
class="style-scope yt-icon"></path>
</g>
</svg>
</yt-icon>
<paper-tooltip id="tooltip"
class="style-scope ytd-thumbnail-overlay-toggle-button-renderer"
role="tooltip"
tabindex="-1">
<div id="tooltip"
class="hidden style-scope paper-tooltip">
Watch later
</div>
</paper-tooltip>
</ytd-thumbnail-overlay-toggle-button-renderer>
</div>
</a>I'd like to see the nicer quality images in Firefox. Triager may have to reload Safari after initial page load; I saw blurry images there once, but subsequent refreshes show higher quality images.
layout.css.servo.enabled: true
From webcompat.com with ❤️
URL: https://www.youtube.com/
Browser / Version: Firefox 59.0
Operating System: Mac OS X 10.12
Tested Another Browser: Yes
Problem type: Something else
Description: YouTube shows lower quality thumbnail images on Firefox vs. Safari (retina?)
Steps to Reproduce:
Reopening #13663
Triager may need to use a retina mac or have the Firefox window on a high DPI display.
Open YouTube home page in private mode.
The thumbnail for https://www.youtube.com/watch?v=LymuZ8abvmc is:
Firefox:
Safari:
I'd like to see the nicer quality images in Firefox. Triager may have to reload Safari after initial page load; I saw blurry images there once, but subsequent refreshes show higher quality images.
layout.css.servo.enabled: true
From webcompat.com with ❤️