www.morganstanley.com - Top slideshow images are displayed to large

[webcompat-bot]

URL: https://www.morganstanley.com/

Browser / Version: Firefox 87.0 Operating System: Linux Tested Another Browser: Yes Chrome

Problem type: Design is broken Description: Items are overlapped Steps to Reproduce: Image sizes are radically wrong

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Note: The issue is not reproducible on Chrome.

Affected area:

<div style="width: 100%; display: inline-block;">
    <picture>
        <source media="(max-width: 767px)" srcset="/pub/content/dam/msdotcom/about-us/giving-back/mental_health_alliance/wide-childrens-innovation-awards.jpg/_jcr_content/renditions/square_1x1.jpg">
        <source media="(max-width: 1024px)" srcset="/pub/content/dam/msdotcom/about-us/giving-back/mental_health_alliance/wide-childrens-innovation-awards.jpg/_jcr_content/renditions/wide_16x9.jpg">
        <source media="(max-width: 1440px)" srcset="/pub/content/dam/msdotcom/about-us/giving-back/mental_health_alliance/wide-childrens-innovation-awards.jpg/_jcr_content/renditions/extrawide_3x1.jpg">
        <img src="/pub/content/dam/msdotcom/about-us/giving-back/mental_health_alliance/wide-childrens-innovation-awards.jpg/_jcr_content/renditions/extrawide_3x1.jpg" class="cmp-image__image" data-cmp-hook-image="image" alt="">
    </picture>
</div>

Tested with: Browser / Version: Firefox Nightly 89.0a1 (2021-04-11) Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[wisniewskit]

If I resize the window, the images briefly seem to be the correct size, then become tall in Firefox. Sure enough, a script is setting them to ridiculous sizes:

<div class="slick-slide" data-slick-index="0" style="width: 12708px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; transition: opacity 500ms ease-out 0s;">

So this is another issue with slick slider, but this time it's not related to flexbox issues (like in #3038, which ended up being resolve by bz1316534), but rather with grid sizes. That is, if I add width:100% to this CSS rule, slick slides will size things correctly after I resize the window:

.herocarousel .image-container {
    grid-column: 1 / span 25;
    grid-row: 1 / span 4;
}

@dholbert, is this a known interop issue?

[dholbert]

@matspalmgren is our grid expert & is more likely to know if this is a known issue / what's going on, etc.

[MatsPalmgren]

If I resize the window, the images briefly seem to be the correct size, then become tall in Firefox. Sure enough, a script is setting them to ridiculous sizes

Well, using JS to do grid layout seems like a bug in and of itself ;-)

I can't really tell what the problem is without knowing what that JS does and why it thinks 12708px is a good size for that grid item. A minimal standalone testcase would help too.

[karlcow]

Before the JS kicks in.

gallery of 3 images.

at this stage https://www.morganstanley.com/pub/etc.clientlibs/msdotcomr4/clientlibs/clientlib-base.min.ACSHASH6c48f6e5d097ac848d454949c634a392.js

$(document).ready(function() {

    var $slideCount = $('.slideCountInfo');
    var $imagesSlider = $('.images-slider, .mobile-insights-carousel');

so far so good, but it computes at a point the width of the slideshow to be very large And that is why the image is getting resized at the end. The container is already wide. The grid element has the right size. Probably not a grid issue.

<div class="slick-track" style="opacity: 1; width: 29619px;">
  <div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 9873px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;">
…
  </div>
</div>

[karlcow]

This is working for me.

[softvision-oana-arbuzov]

I can confirm this, the slideshow image at the top are displayed correctly.

Tested with: Browser / Version: Firefox Nightly 100.0a1 (2022-03-14) Operating System: Windows 10 Pro

[inv_11/2022]