Bootstrap: Responsive Carousel with Chrome, Opera and Vivaldi v4

[josmaissan]

Responsive Carousel does not work with browsers: Chrome, Opera and Vivaldi

The hight stays at real picture hight.

• Operating system and version (macOS Sierra 10.12.3 and Windows 10.0)
• Browser and version (Google Chrome 56.0.2924.87, Opera 43.0.2442.806 and Vivaldi 1.7.735.46)

Here is a demo of the problem (desktops with i.a. Chrome & Opera all stable) on JSFiddle:
https://jsfiddle.net/josmaissan/2e54sbt7/

This is what it looks like:

Here are some posible solutions:

1. Solution option 1, with the suggestion of @Jas-n:
   https://jsfiddle.net/josmaissan/vgh5z4zx/
2. Solution option 2, with the suggestion of @DeltaOS2:
   https://jsfiddle.net/josmaissan/0tqjxrf3/
3. Solution option 3, #21799, with the suggestion of @vanduynslagerp:
   https://jsfiddle.net/josmaissan/08u40Lue/

[wrldtrvllr]

I'm experiencing the same issue. Worked as expected with alpha 5. Apparently, display: flex in .carousel-item.active is causing the problem.

[Jas-n]

You can fix this by overwriting the ".carousel-item.active" selector to display:block;

[josmaissan]

@Jas-n It's a partly fix.
During the transition it is still to high displayed (only the upper part of the picture is visible), but pops in when transition is finished.

[Jas-n]

Sorry, Need to add 3 classes which covers the transitions:

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{
display:block;
}

[wrldtrvllr]

Will this be fixed in an upcoming release or should we stick with the workaround?

[Jas-n]

I'd guess this'll be fixed before the next (beta) release.

[wrldtrvllr]

Great! Thank you very much.

[josmaissan]

@Jas-n Yes, now it works fine!

[mdo]

Does anyone have a demo of the problem?

[josmaissan]

@mdo Here is a temperary demo:
http://jossan.home.xs4all.nl/test/carousel-0.html
problems with Chrome, Opera, Vivaldi only.

This is what it looks like:

[iatek]

Here's another example of the issue:
http://www.codeply.com/go/0QUU06MiIL

Interesting too that display:flex makes it difficult to create a text-only carousel.
http://stackoverflow.com/questions/41543707/text-only-carousel/41550102#41550102

[DeltaOS2]

I fixed it by overwriting the size in the img-element directly:
<div class="carousel-item active"> <img class="d-block img-fluid" src="assets/images/slides/slide1.jpeg" alt="First slide" style="width:100%; height:100%"> </div>
it works in chrome 55.x, opera 42.x, firefox 50.1x and safari on mac.

[josmaissan]

You're right @DeltaOS2, by adding a width- and height style of 100% to each img it seems to look okay too.

[josmaissan]

See:
Prevent images in carousel-item to be stretched #21799
Carousel plugin dont save aspect ratio of images #21658

[josmaissan]

@mdo

1. Here is a demo of the problem on desktops with i.a. Chrome & Opera on JSFiddle:
   https://jsfiddle.net/josmaissan/2e54sbt7/
2. Solution option 1, with the suggestion of @Jas-n:
   https://jsfiddle.net/josmaissan/vgh5z4zx/
3. Solution option 2, with the suggestion of @DeltaOS2:
   https://jsfiddle.net/josmaissan/0tqjxrf3/
4. Solution option 3, with the suggestion of @vanduynslagerp #21799:
   https://jsfiddle.net/josmaissan/08u40Lue/

[mdo]

Closing as dupe of #21658.

[mdo]

Fixed by #22392