search

webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
742 stars 65 forks source link

www.homedepot.com - video doesn't play properly when not full screen #15556

Closed hwine closed 6 years ago

hwine commented 6 years ago

URL: https://www.homedepot.com/p/Pfister-Clarify-Single-Handle-Pull-Down-Sprayer-Kitchen-Faucet-with-GE-Filtration-System-in-Stainless-Steel-F-529-FCYS/206079882

[originally filed as #15526, better STR below]

Browser/Version: Firefox 58.0 & 60.0 Operating System: windows 10 & macOS What seems to be the trouble?(Required)

Steps to Reproduce

  1. Start with new empty profile
  2. Navigate to: (site url)
  3. make sure you are not full screen
  4. play topmost video

Expected Behavior: It plays normally, and is completely visible within browser window.

Actual Behavior: It's offset vertically, such that it is not visible. See attached screenshot taken with firefox's "full page" mode (then trimmed at bottom). The visible screen is shown.

Screenshot image

softvision-sergiulogigan commented 6 years ago

There's definately an issue there, @hwine , but it is not reproducible on our side. Maybe @karlcow or @wisniewskit can reproduce this?

image

hwine commented 6 years ago

@softvision-sergiulogigan (or @karlcow or @wisniewskit) - try it with a narrower browser window -- still wide enough for video to play. Note that in my example, there's only room for 1 column of icons to the right. In your screenshot there is room for 3 columns of icons.

softvision-sergiulogigan commented 6 years ago

Yup, that;s right. I can also reproduce.

image

This is where the magic happens:

<div class="mediaOverlayImages">
                        <div id="overlay-body-left" data-component="main">
                            <div id="overlay-main-image-container" style="height: 667px;">
        <div id="main-product-overlay-image" class="mediaPlayer">
                <div id="videoPlaceHolderOverlay" class="videoPlayer"><div data-video-id="4455313467001" data-player="4JE-ofbdg" data-account="66036796001" class="video-js vjs-controls-enabled vjs-workinghover vjs-v6 bc-player-4JE-ofbdg_default bc-player-4JE-ofbdg_default-index-0 vjs-mouse vjs-plugins-ready vjs-contextmenu vjs-contextmenu-ui vjs-player-info vjs-errors vjs-has-started hapyak-remote hapyak-player hapyak-enable-enabled hapyak-enable-javascript hapyak-enable-likeDislike_homeDepot_12919 hapyak-enable-widget-external-form hapyak-enable-widget-poll hapyak-enable-widget-signin hapyak-enable-widget-user-sentiment hapyak-enable-annotationList hapyak-enable-bookmark hapyak-enable-drawing hapyak-enable-hotlink hapyak-enable-iframe hapyak-enable-image hapyak-enable-ontime hapyak-enable-pop hapyak-enable-quiz hapyak-enable-toc hapyak-enable-contents hapyak-enable-branching hapyak-enable-chapters hapyak-enable-lesson hapyak-enable-links hapyak-enable-playlist hapyak-enable-questions hapyak-enable-singleVideoLandingPage hapyak-enable-slidesync hapyak-enable-clickSetCss hapyak-enable-customClasses hapyak-enable-customCss hapyak-enable-dynamicAnnotations hapyak-enable-branding hapyak-enable-single-video-landing-page hapyak-enable-video-only hapyak-enable-socialShare hapyak-enable-brightcove hapyak-enable-multitrack hapyak-enable-kaltura hapyak-enable-ooyala hapyak-enable-theplatform hapyak-enable-vidYard hapyak-enable-videojsvr hapyak-enable-wistia hapyak-enable-activeSessions hapyak-enable-interactionRate hapyak-enable-interactions hapyak-enable-people hapyak-enable-plays hapyak-enable-custom hapyak-enable-responsiveContainerAspectRatio hapyak-enable-inviteGroupMembers hapyak-enable-defaults hapyak-enable-sampleTab hapyak-enable-styleBuilder hapyak-enable-embedly hapyak-enable-experience-hapyak-player hapyak-enable-nativeControls hapyak-enable-landing-page hapyak-enable-native-player hapyak-enable-transitions hapyak-enable-titles hapyak-view-mode vjs-playing playing not-hover vjs-user-inactive" data-embed="default" id="bcvideo_4455313467001" role="region" aria-label="Video Player" lang="en-us"><video id="bcvideo_4455313467001_html5_api" data-embed="default" class="vjs-tech" data-account="66036796001" data-player="4JE-ofbdg" data-video-id="4455313467001" tabindex="-1" preload="auto" poster="https://httpsak-a.akamaihd.net/66036796001/66036796001_4455416428001_hdiv442215052400114410545780144987.jpg?pubId=66036796001&amp;videoId=4455313467001" src="https://f1.media.brightcove.com/12/66036796001/66036796001_4455416430001_hdiv442215052400114410545780337242.mp4?pubId=66036796001&amp;videoId=4455313467001"></video><script src="//vjs.zencdn.net/vttjs/0.12.5/vtt.global.min.js"></script><div class="vjs-poster" tabindex="-1" aria-disabled="false" style="background-image: url(&quot;https://httpsak-a.akamaihd.net/66036796001/66036796001_4455416428001_hdiv442215052400114410545780144987.jpg?pubId=66036796001&amp;videoId=4455313467001&quot;);"></div><div class="hapyak-annotation-container hapyak-root active" style="width: 1200px; margin: 480.875px 0px; height: 675px; transform: scale(0.443333);"><div class="hapyak-contents-container"></div><div class="popcorn-iframe active" style="position: absolute; top: 1.2873%; left: 73.1507%; width: 26.25%; height: 14.497%;" data-popcorn-id="iframe1519287361732" data-hapyak-id="968611"><div><iframe allowtransparency="true" id="iframe1519287361740" src="//a0c57e85985c1cdedaa9bfa514328046779f920c.hapyak-hosted.com/user_uploads/468/144468/968611/eed1f0d7fadd43359487.html?hyEnv=production&amp;v=1"></iframe></div></div></div><div class="vjs-text-track-display" aria-live="off" aria-atomic="true"><div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: 1.5%;"></div></div><div class="vjs-loading-spinner" dir="ltr"></div><button class="vjs-big-play-button" type="button" aria-live="polite" title="Play Video" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Play Video</span></button><div class="vjs-control-bar" dir="ltr" role="group"><button class="vjs-play-control vjs-control vjs-button vjs-playing" type="button" aria-live="polite" title="Pause" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Pause</span></button><div class="vjs-volume-panel vjs-control vjs-volume-panel-horizontal"><button class="vjs-mute-control vjs-control vjs-button vjs-vol-3" type="button" aria-live="polite" title="Mute" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Mute</span></button><div class="vjs-volume-control vjs-control vjs-volume-horizontal"><div tabindex="0" class="vjs-volume-bar vjs-slider-bar vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-label="Volume Level" aria-live="polite" aria-valuetext="100%"><div class="vjs-volume-level"><span class="vjs-control-text"></span></div></div></div></div><div class="vjs-current-time vjs-time-control vjs-control"><div class="vjs-current-time-display" aria-live="off">8:22</div></div><div class="vjs-time-control vjs-time-divider"><div><span>/</span></div></div><div class="vjs-duration vjs-time-control vjs-control"><div class="vjs-duration-display" aria-live="off">8:38</div></div><div class="vjs-progress-control vjs-control"><div tabindex="0" class="vjs-progress-holder vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="97.11" aria-valuemin="0" aria-valuemax="100" aria-label="Progress Bar" aria-valuetext="8:23 of 8:38"><div class="vjs-load-progress" style="width: 91.3398%;"><span class="vjs-control-text"><span>Loaded</span>: 0%</span><div style="left: 0%; width: 100%;"></div></div><div class="vjs-mouse-display"><div class="vjs-time-tooltip"></div></div><div class="vjs-play-progress vjs-slider-bar" style="width: 97.11%;"><div class="vjs-time-tooltip" style="right: -15.4737px;">8:22</div><span class="vjs-control-text"><span>Progress</span>: 0%</span></div></div></div><div class="vjs-live-control vjs-control vjs-hidden"><div class="vjs-live-display" aria-live="off"><span class="vjs-control-text">Stream Type</span>LIVE</div></div><div class="vjs-remaining-time vjs-time-control vjs-control"><div class="vjs-remaining-time-display" aria-live="off">-0:16</div></div><div class="vjs-custom-control-spacer vjs-spacer ">&nbsp;</div><div class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-live="polite" aria-disabled="false" title="Playback Rate" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Playback Rate</span></button><div class="vjs-menu"><ul class="vjs-menu-content" role="menu"></ul></div><div class="vjs-playback-rate-value">1x</div></div><div class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-live="polite" aria-disabled="false" title="Chapters" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Chapters</span></button><div class="vjs-menu"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-title" tabindex="-1">Chapters</li></ul></div></div><div class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-live="polite" aria-disabled="false" title="Descriptions" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Descriptions</span></button><div class="vjs-menu"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox" aria-live="polite" aria-disabled="false" aria-checked="true"><span class="vjs-menu-item-text">descriptions off</span><span class="vjs-control-text">, selected</span></li></ul></div></div><div class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-live="polite" aria-disabled="false" title="Captions" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Captions</span></button><div class="vjs-menu"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-item vjs-texttrack-settings" tabindex="-1" role="menuitem" aria-live="polite" aria-disabled="false"><span class="vjs-menu-item-text">captions settings</span><span class="vjs-control-text">, opens captions settings dialog</span></li><li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox" aria-live="polite" aria-disabled="false" aria-checked="true"><span class="vjs-menu-item-text">captions off</span><span class="vjs-control-text">, selected</span></li></ul></div></div><div class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-live="polite" aria-disabled="false" title="Audio Track" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Audio Track</span></button><div class="vjs-menu"><ul class="vjs-menu-content" role="menu"></ul></div></div><button class="vjs-fullscreen-control vjs-control vjs-button" type="button" aria-live="polite" title="Fullscreen" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Fullscreen</span></button></div><div class="vjs-error-display vjs-modal-dialog vjs-hidden " tabindex="-1" aria-describedby="bcvideo_4455313467001_component_435_description" aria-hidden="true" aria-label="Modal Window" role="dialog"><p class="vjs-modal-dialog-description vjs-control-text" id="bcvideo_4455313467001_component_435_description">This is a modal window.</p><div class="vjs-modal-dialog-content" role="document"></div></div><div class="vjs-modal-dialog vjs-hidden  vjs-text-track-settings" tabindex="-1" aria-describedby="bcvideo_4455313467001_component_441_description" aria-hidden="true" aria-label="Caption Settings Dialog" role="dialog"><p class="vjs-modal-dialog-description vjs-control-text" id="bcvideo_4455313467001_component_441_description">Beginning of dialog window. Escape will cancel and close the window.</p><div class="vjs-modal-dialog-content" role="document"><div class="vjs-track-settings-colors"><fieldset class="vjs-fg-color vjs-track-setting"><legend id="captions-text-legend-bcvideo_4455313467001_component_441">Text</legend><label id="captions-foreground-color-bcvideo_4455313467001_component_441" class="vjs-label">Color</label><select aria-labelledby="captions-text-legend-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441"><option id="captions-foreground-color-bcvideo_4455313467001_component_441-White" value="#FFF" aria-labelledby="captions-text-legend-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441-White">White</option><option id="captions-foreground-color-bcvideo_4455313467001_component_441-Black" value="#000" aria-labelledby="captions-text-legend-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441-Black">Black</option><option id="captions-foreground-color-bcvideo_4455313467001_component_441-Red" value="#F00" aria-labelledby="captions-text-legend-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441-Red">Red</option><option id="captions-foreground-color-bcvideo_4455313467001_component_441-Green" value="#0F0" aria-labelledby="captions-text-legend-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441-Green">Green</option><option id="captions-foreground-color-bcvideo_4455313467001_component_441-Blue" value="#00F" aria-labelledby="captions-text-legend-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441-Blue">Blue</option><option id="captions-foreground-color-bcvideo_4455313467001_component_441-Yellow" value="#FF0" aria-labelledby="captions-text-legend-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441-Yellow">Yellow</option><option id="captions-foreground-color-bcvideo_4455313467001_component_441-Magenta" value="#F0F" aria-labelledby="captions-text-legend-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441-Magenta">Magenta</option><option id="captions-foreground-color-bcvideo_4455313467001_component_441-Cyan" value="#0FF" aria-labelledby="captions-text-legend-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441 captions-foreground-color-bcvideo_4455313467001_component_441-Cyan">Cyan</option></select><span class="vjs-text-opacity vjs-opacity"><label id="captions-foreground-opacity-bcvideo_4455313467001_component_441" class="vjs-label">Transparency</label><select aria-labelledby="captions-text-legend-bcvideo_4455313467001_component_441 captions-foreground-opacity-bcvideo_4455313467001_component_441"><option id="captions-foreground-opacity-bcvideo_4455313467001_component_441-Opaque" value="1" aria-labelledby="captions-text-legend-bcvideo_4455313467001_component_441 captions-foreground-opacity-bcvideo_4455313467001_component_441 captions-foreground-opacity-bcvideo_4455313467001_component_441-Opaque">Opaque</option><option id="captions-foreground-opacity-bcvideo_4455313467001_component_441-Semi-Transparent" value="0.5" aria-labelledby="captions-text-legend-bcvideo_4455313467001_component_441 captions-foreground-opacity-bcvideo_4455313467001_component_441 captions-foreground-opacity-bcvideo_4455313467001_component_441-Semi-Transparent">Semi-Transparent</option></select></span></fieldset><fieldset class="vjs-bg-color vjs-track-setting"><legend id="captions-background-bcvideo_4455313467001_component_441">Background</legend><label id="captions-background-color-bcvideo_4455313467001_component_441" class="vjs-label">Color</label><select aria-labelledby="captions-background-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441"><option id="captions-background-color-bcvideo_4455313467001_component_441-Black" value="#000" aria-labelledby="captions-background-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441-Black">Black</option><option id="captions-background-color-bcvideo_4455313467001_component_441-White" value="#FFF" aria-labelledby="captions-background-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441-White">White</option><option id="captions-background-color-bcvideo_4455313467001_component_441-Red" value="#F00" aria-labelledby="captions-background-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441-Red">Red</option><option id="captions-background-color-bcvideo_4455313467001_component_441-Green" value="#0F0" aria-labelledby="captions-background-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441-Green">Green</option><option id="captions-background-color-bcvideo_4455313467001_component_441-Blue" value="#00F" aria-labelledby="captions-background-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441-Blue">Blue</option><option id="captions-background-color-bcvideo_4455313467001_component_441-Yellow" value="#FF0" aria-labelledby="captions-background-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441-Yellow">Yellow</option><option id="captions-background-color-bcvideo_4455313467001_component_441-Magenta" value="#F0F" aria-labelledby="captions-background-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441-Magenta">Magenta</option><option id="captions-background-color-bcvideo_4455313467001_component_441-Cyan" value="#0FF" aria-labelledby="captions-background-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441 captions-background-color-bcvideo_4455313467001_component_441-Cyan">Cyan</option></select><span class="vjs-bg-opacity vjs-opacity"><label id="captions-background-opacity-bcvideo_4455313467001_component_441" class="vjs-label">Transparency</label><select aria-labelledby="captions-background-bcvideo_4455313467001_component_441 captions-background-opacity-bcvideo_4455313467001_component_441"><option id="captions-background-opacity-bcvideo_4455313467001_component_441-Opaque" value="1" aria-labelledby="captions-background-bcvideo_4455313467001_component_441 captions-background-opacity-bcvideo_4455313467001_component_441 captions-background-opacity-bcvideo_4455313467001_component_441-Opaque">Opaque</option><option id="captions-background-opacity-bcvideo_4455313467001_component_441-Semi-Transparent" value="0.5" aria-labelledby="captions-background-bcvideo_4455313467001_component_441 captions-background-opacity-bcvideo_4455313467001_component_441 captions-background-opacity-bcvideo_4455313467001_component_441-Semi-Transparent">Semi-Transparent</option><option id="captions-background-opacity-bcvideo_4455313467001_component_441-Transparent" value="0" aria-labelledby="captions-background-bcvideo_4455313467001_component_441 captions-background-opacity-bcvideo_4455313467001_component_441 captions-background-opacity-bcvideo_4455313467001_component_441-Transparent">Transparent</option></select></span></fieldset><fieldset class="vjs-window-color vjs-track-setting"><legend id="captions-window-bcvideo_4455313467001_component_441">Window</legend><label id="captions-window-color-bcvideo_4455313467001_component_441" class="vjs-label">Color</label><select aria-labelledby="captions-window-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441"><option id="captions-window-color-bcvideo_4455313467001_component_441-Black" value="#000" aria-labelledby="captions-window-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441-Black">Black</option><option id="captions-window-color-bcvideo_4455313467001_component_441-White" value="#FFF" aria-labelledby="captions-window-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441-White">White</option><option id="captions-window-color-bcvideo_4455313467001_component_441-Red" value="#F00" aria-labelledby="captions-window-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441-Red">Red</option><option id="captions-window-color-bcvideo_4455313467001_component_441-Green" value="#0F0" aria-labelledby="captions-window-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441-Green">Green</option><option id="captions-window-color-bcvideo_4455313467001_component_441-Blue" value="#00F" aria-labelledby="captions-window-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441-Blue">Blue</option><option id="captions-window-color-bcvideo_4455313467001_component_441-Yellow" value="#FF0" aria-labelledby="captions-window-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441-Yellow">Yellow</option><option id="captions-window-color-bcvideo_4455313467001_component_441-Magenta" value="#F0F" aria-labelledby="captions-window-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441-Magenta">Magenta</option><option id="captions-window-color-bcvideo_4455313467001_component_441-Cyan" value="#0FF" aria-labelledby="captions-window-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441 captions-window-color-bcvideo_4455313467001_component_441-Cyan">Cyan</option></select><span class="vjs-window-opacity vjs-opacity"><label id="captions-window-opacity-bcvideo_4455313467001_component_441" class="vjs-label">Transparency</label><select aria-labelledby="captions-window-bcvideo_4455313467001_component_441 captions-window-opacity-bcvideo_4455313467001_component_441"><option id="captions-window-opacity-bcvideo_4455313467001_component_441-Transparent" value="0" aria-labelledby="captions-window-bcvideo_4455313467001_component_441 captions-window-opacity-bcvideo_4455313467001_component_441 captions-window-opacity-bcvideo_4455313467001_component_441-Transparent">Transparent</option><option id="captions-window-opacity-bcvideo_4455313467001_component_441-Semi-Transparent" value="0.5" aria-labelledby="captions-window-bcvideo_4455313467001_component_441 captions-window-opacity-bcvideo_4455313467001_component_441 captions-window-opacity-bcvideo_4455313467001_component_441-Semi-Transparent">Semi-Transparent</option><option id="captions-window-opacity-bcvideo_4455313467001_component_441-Opaque" value="1" aria-labelledby="captions-window-bcvideo_4455313467001_component_441 captions-window-opacity-bcvideo_4455313467001_component_441 captions-window-opacity-bcvideo_4455313467001_component_441-Opaque">Opaque</option></select></span></fieldset></div><div class="vjs-track-settings-font&quot;>"><fieldset class="vjs-font-percent vjs-track-setting"><legend id="captions-font-size-bcvideo_4455313467001_component_441" class="">Font Size</legend><select aria-labelledby="captions-font-size-bcvideo_4455313467001_component_441"><option id="captions-font-size-bcvideo_4455313467001_component_441-50%" value="0.50" aria-labelledby="captions-font-size-bcvideo_4455313467001_component_441 captions-font-size-bcvideo_4455313467001_component_441-50%">50%</option><option id="captions-font-size-bcvideo_4455313467001_component_441-75%" value="0.75" aria-labelledby="captions-font-size-bcvideo_4455313467001_component_441 captions-font-size-bcvideo_4455313467001_component_441-75%">75%</option><option id="captions-font-size-bcvideo_4455313467001_component_441-100%" value="1.00" aria-labelledby="captions-font-size-bcvideo_4455313467001_component_441 captions-font-size-bcvideo_4455313467001_component_441-100%">100%</option><option id="captions-font-size-bcvideo_4455313467001_component_441-125%" value="1.25" aria-labelledby="captions-font-size-bcvideo_4455313467001_component_441 captions-font-size-bcvideo_4455313467001_component_441-125%">125%</option><option id="captions-font-size-bcvideo_4455313467001_component_441-150%" value="1.50" aria-labelledby="captions-font-size-bcvideo_4455313467001_component_441 captions-font-size-bcvideo_4455313467001_component_441-150%">150%</option><option id="captions-font-size-bcvideo_4455313467001_component_441-175%" value="1.75" aria-labelledby="captions-font-size-bcvideo_4455313467001_component_441 captions-font-size-bcvideo_4455313467001_component_441-175%">175%</option><option id="captions-font-size-bcvideo_4455313467001_component_441-200%" value="2.00" aria-labelledby="captions-font-size-bcvideo_4455313467001_component_441 captions-font-size-bcvideo_4455313467001_component_441-200%">200%</option><option id="captions-font-size-bcvideo_4455313467001_component_441-300%" value="3.00" aria-labelledby="captions-font-size-bcvideo_4455313467001_component_441 captions-font-size-bcvideo_4455313467001_component_441-300%">300%</option><option id="captions-font-size-bcvideo_4455313467001_component_441-400%" value="4.00" aria-labelledby="captions-font-size-bcvideo_4455313467001_component_441 captions-font-size-bcvideo_4455313467001_component_441-400%">400%</option></select></fieldset><fieldset class="vjs-edge-style vjs-track-setting"><legend id="bcvideo_4455313467001_component_441" class="">Text Edge Style</legend><select aria-labelledby="bcvideo_4455313467001_component_441"><option id="bcvideo_4455313467001_component_441-None" value="none" aria-labelledby="bcvideo_4455313467001_component_441 bcvideo_4455313467001_component_441-None">None</option><option id="bcvideo_4455313467001_component_441-Raised" value="raised" aria-labelledby="bcvideo_4455313467001_component_441 bcvideo_4455313467001_component_441-Raised">Raised</option><option id="bcvideo_4455313467001_component_441-Depressed" value="depressed" aria-labelledby="bcvideo_4455313467001_component_441 bcvideo_4455313467001_component_441-Depressed">Depressed</option><option id="bcvideo_4455313467001_component_441-Uniform" value="uniform" aria-labelledby="bcvideo_4455313467001_component_441 bcvideo_4455313467001_component_441-Uniform">Uniform</option><option id="bcvideo_4455313467001_component_441-Dropshadow" value="dropshadow" aria-labelledby="bcvideo_4455313467001_component_441 bcvideo_4455313467001_component_441-Dropshadow">Dropshadow</option></select></fieldset><fieldset class="vjs-font-family vjs-track-setting"><legend id="captions-font-family-bcvideo_4455313467001_component_441" class="">Font Family</legend><select aria-labelledby="captions-font-family-bcvideo_4455313467001_component_441"><option id="captions-font-family-bcvideo_4455313467001_component_441-Proportional Sans-Serif" value="proportionalSansSerif" aria-labelledby="captions-font-family-bcvideo_4455313467001_component_441 captions-font-family-bcvideo_4455313467001_component_441-Proportional Sans-Serif">Proportional Sans-Serif</option><option id="captions-font-family-bcvideo_4455313467001_component_441-Monospace Sans-Serif" value="monospaceSansSerif" aria-labelledby="captions-font-family-bcvideo_4455313467001_component_441 captions-font-family-bcvideo_4455313467001_component_441-Monospace Sans-Serif">Monospace Sans-Serif</option><option id="captions-font-family-bcvideo_4455313467001_component_441-Proportional Serif" value="proportionalSerif" aria-labelledby="captions-font-family-bcvideo_4455313467001_component_441 captions-font-family-bcvideo_4455313467001_component_441-Proportional Serif">Proportional Serif</option><option id="captions-font-family-bcvideo_4455313467001_component_441-Monospace Serif" value="monospaceSerif" aria-labelledby="captions-font-family-bcvideo_4455313467001_component_441 captions-font-family-bcvideo_4455313467001_component_441-Monospace Serif">Monospace Serif</option><option id="captions-font-family-bcvideo_4455313467001_component_441-Casual" value="casual" aria-labelledby="captions-font-family-bcvideo_4455313467001_component_441 captions-font-family-bcvideo_4455313467001_component_441-Casual">Casual</option><option id="captions-font-family-bcvideo_4455313467001_component_441-Script" value="script" aria-labelledby="captions-font-family-bcvideo_4455313467001_component_441 captions-font-family-bcvideo_4455313467001_component_441-Script">Script</option><option id="captions-font-family-bcvideo_4455313467001_component_441-Small Caps" value="small-caps" aria-labelledby="captions-font-family-bcvideo_4455313467001_component_441 captions-font-family-bcvideo_4455313467001_component_441-Small Caps">Small Caps</option></select></fieldset></div><div class="vjs-track-settings-controls"><button class="vjs-default-button" title="restore all settings to the default values">Reset<span class="vjs-control-text"> restore all settings to the default values</span></button><button class="vjs-done-button">Done</button></div></div><button class="vjs-close-button vjs-control vjs-button" type="button" aria-live="polite" aria-disabled="false" title="Close Modal Dialog"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Close Modal Dialog</span></button><p class="vjs-control-text">End of dialog window.</p></div><iframe class="vjs-resize-manager"></iframe><div class="vjs-player-info-modal vjs-modal-dialog vjs-hidden " tabindex="-1" aria-describedby="bcvideo_4455313467001_component_618_description" aria-hidden="true" aria-label="Player Information Dialog" role="dialog"><button class="vjs-close-button vjs-control vjs-button" type="button" aria-live="polite" aria-disabled="false" title="Close Modal Dialog"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Close Modal Dialog</span></button><p class="vjs-modal-dialog-description vjs-control-text" id="bcvideo_4455313467001_component_618_description">This is a modal window. This modal can be closed by pressing the Escape key or activating the close button.</p><div class="vjs-modal-dialog-content" role="document"></div></div><div class="hapyak-annotation-container hapyak-annotation-noscale-container hapyak-root active" style="margin: 480.875px 0px; height: 299.25px;"></div><div class="hapyak-top-left-container hapyak-root"><div class="hapyak-basic360Edit-container"></div><div class="hapyak-audio-note-container"></div><div class="hapyak-drawing-edit-container"></div><div class="hapyak-ontime-edit-container"></div></div><div class="hapyak-editor-container hapyak-root"></div><div class="hapyak-overlay-container hapyak-root"></div></div></div>
        </div>
    </div>
                            <div class="image-caption"></div>
                        </div>
                        <div id="overlay-body-right" data-component="thumbnails">
        <div id="overlayThumbnails">
                <a class="overlayThumbnail" data-media_type="IMAGE" data-media_id="stainless-steel-pfister-pull-down-faucets-f-529-fcys-64" data-target="IMAGE" data-has-index="true">
                    <img src="https://images.homedepot-static.com/productImages/22024235-cdb9-4be7-a3d5-2265f120a1de/svn/stainless-steel-pfister-pull-down-faucets-f-529-fcys-64_145.jpg">
                </a>
                <a class="overlayThumbnail" data-media_type="IMAGE" data-media_id="stainless-steel-pfister-pull-down-faucets-f-529-fcys-c3" data-target="IMAGE" data-has-index="true">
                    <img src="https://images.homedepot-static.com/productImages/aac1d7e4-c09a-4dbb-b86c-4322df2a7031/svn/stainless-steel-pfister-pull-down-faucets-f-529-fcys-c3_145.jpg">
                </a>
                <a class="overlayThumbnail overlayThumbnail--selected" data-media_type="VIDEO" data-media_id="4455313467001" data-target="VIDEO" data-has-index="true"><span class="videoIcon"></span>
                    <img src="https://httpsak-a.akamaihd.net/66036796001/66036796001_4455416427001_hdiv442215052400114410545780003748.jpg?pubId=66036796001">
                </a>
                <a class="overlayThumbnail" data-media_type="VIDEO" data-media_id="4494538087001" data-target="VIDEO" data-has-index="true"><span class="videoIcon"></span>
                    <img src="https://f1.media.brightcove.com/8/1834613806001/1834613806001_4494525814001_4494510927001-th.jpg?pubId=1834613806001">
                </a>
                <a class="overlayThumbnail" data-media_type="THREESIXTY" data-media_id="206079882_01" data-target="THREESIXTY" data-has-index="true"><div class="whiteout"></div><span class="threesixtyIcon"></span>
                    <img src="//www.thdstatic.com/spin/82/206079882/206079882_S01.spin?thumb&amp;profile=400">
                </a>
                <a class="overlayThumbnail" data-media_type="IMAGE" data-media_id="stainless-steel-pfister-pull-down-faucets-f-529-fcys-4f" data-target="IMAGE" data-has-index="true">
                    <img src="https://images.homedepot-static.com/productImages/02f0aef0-bd6c-49d3-827f-6957cfe15f98/svn/stainless-steel-pfister-pull-down-faucets-f-529-fcys-4f_145.jpg">
                </a>
                <a class="overlayThumbnail" data-media_type="IMAGE" data-media_id="stainless-steel-pfister-pull-down-faucets-f-529-fcys-1f" data-target="IMAGE" data-has-index="true">
                    <img src="https://images.homedepot-static.com/productImages/073016cd-5c83-43ce-a37c-86cbfecff86b/svn/stainless-steel-pfister-pull-down-faucets-f-529-fcys-1f_145.jpg">
                </a>
                <a class="overlayThumbnail" data-media_type="IMAGE" data-media_id="stainless-steel-pfister-pull-down-faucets-f-529-fcys-44" data-target="IMAGE" data-has-index="true">
                    <img src="https://images.homedepot-static.com/productImages/382b7a6e-d823-4698-9414-0d1258ebfc29/svn/stainless-steel-pfister-pull-down-faucets-f-529-fcys-44_145.jpg">
                </a>
                <a class="overlayThumbnail" data-media_type="IMAGE" data-media_id="stainless-steel-pfister-pull-down-faucets-f-529-fcys-fa" data-target="IMAGE" data-has-index="true">
                    <img src="https://images.homedepot-static.com/productImages/999fb2b2-cc83-48d0-849d-b8bf798f52bd/svn/stainless-steel-pfister-pull-down-faucets-f-529-fcys-fa_145.jpg">
                </a>
                <a class="overlayThumbnail" data-media_type="IMAGE" data-media_id="stainless-steel-pfister-pull-down-faucets-f-529-fcys-76" data-target="IMAGE" data-has-index="true">
                    <img src="https://images.homedepot-static.com/productImages/3d2ce19e-3a0f-42c0-919b-d14866649132/svn/stainless-steel-pfister-pull-down-faucets-f-529-fcys-76_145.jpg">
                </a>
                <a class="overlayThumbnail" data-media_type="IMAGE" data-media_id="stainless-steel-pfister-pull-down-faucets-f-529-fcys-d4" data-target="IMAGE" data-has-index="true">
                    <img src="https://images.homedepot-static.com/productImages/90d7272e-a246-4b83-96dc-92a69b607616/svn/stainless-steel-pfister-pull-down-faucets-f-529-fcys-d4_145.jpg">
                </a>
        <div class="clearfloat"></div></div>
    </div>
                    </div>
karlcow commented 6 years ago

Ah quite interesting! This is a real issue, but not a webcompat issue.

Chrome left, Firefox right. The issue is generated because the height is set very high.

<div id="overlay-main-image-container" style="height: 1332px;">
…
</div>

But even if I remove it stays high. The icons box has an overflow-y: auto. Some of the height, padding, etc are set dynamically. This requires a bit more work for really finding out the source. But as I said not a webcompat issue. Broken on Firefox and Chrome and Safari.

Screenshot Description

miketaylr commented 6 years ago

Given that this is broken in all browsers, let's move it to non-compat.