Slide width sizing issue when depending on imagesLoaded: true on IE11 / Edge

[Webifi]

Width of slides does not always adjust to fit image, even when using imagesLoaded: true.

see: https://codepen.io/webifi/pen/KeqxYd

On Chrome and Firefox, width of all slides match width of image. On IE 11 & Edge, width of some slides are too wide -- like they were sized before the images finished loading/rendering/scaling width relative to height of container.

[desandro]

Thanks for reporting this issue. Looks like this may be a CSS issue. I see that the "Hippie Food" cell is sometimes too large. I'm not sure why this one is larger than the others. I looked at this for 20 minutes and I cannot find the issue. My recommendation is to remove elements & CSS and seeing if you can isolate where the issue is being caused.

[Webifi]

Thanks for taking a look.

It seems too random for it to be a CSS issue. Sometimes hippy food is too wide, sometimes it's that and Sedaris. It doesn't happen to all of them, when they're all basically the same. It seems to apply only elements earlier in the DOM, making me think that it's more of a timing issue (position/size script triggering before DOM is fully rendered).

In a separate, but possibly related issue: I notice that when resizing the window below 768px, triggering CSS that will shrink the height (and relative width) of the images, IE/Edge fail to update the position of the slides in the carousel. I'm wondering if the flickity code-path for calculating size of and position of the slides isn't being triggered when it needs to on IE/Edge?

[desandro]

The root of the problem is how this example relies on the size of the images for the size of the cells. It's easy for element size to collapse if the image has not been loaded, or if there's a weird calculation with min-width and height.

Flickity's resize behavior is triggering just fine from my observations.

[Webifi]

Seems this css is triggering it:

.mq-fb-has-title .mq-feature-banner-image-container, .mq-fb-has-sub-title .mq-feature-banner-image-container, .mq-fb-has-date .mq-feature-banner-image-container { height: 83%; display: block; position: relative; }

For some reason it throws IE/Edge for a loop. It seems to expand its width to the actual width of the image, not the re-sized width, but only in some cases. So, not a bug with flickity, but apparently errant behavior of IE/Edge. Not sure how I'll work-around it.

I'll look into the resize issue more when I get a chance and submit another ticket for it if needed.

[Webifi]

Fixed it: https://codepen.io/anon/pen/GGvBro

I just had to simply apply the 83% size to the image, not its container.

However, IE/Edge do not seem to responsively resize the width of the slides when the carousel height shrinks, shrinking the width of the image. Open the carousel in a window > 768px. Then shrink the window to blow 768px. The width of each slide is still the same as it was before. (I'll open a new issue for this if you think it's Flickity related.)

[desandro]

Thanks for following up!

IE/Edge do not seem to responsively resize the width of the slides when the carousel height shrinks, shrinking the width of the image

This looks to be a browser issue, not Flickity related. It happens if you disable Flickity and uses CSS float. See demo https://codepen.io/desandro/pen/4eadf797a7bc2133087b1015ff778b5a/