Bootstrap: Blank space between slides - Carousel

[leskam]

In browser Firefox Beta (58.0) I found a bug in Bootstrap Carousel. Between slides there are a blank space like on photo. Probably new Firefox CSS engine cant render fine bootstrap CSS.

CodePen live test.

Details:
Bootstrap 4 beta.2
Firefox 58.0a1 (build 2017-11-02) x64
Windows 10 ver. 1703 x64

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

[leskam]

Sorry, updated first post.

[Grukdon]

I'm experiencing the same thing, running on FF58.0b1 (developer edition). I'm thinking it's a browser bug because I swear it was working on FF57...

Curious though, if you scroll through the carousel backwards (with left arrow), does it work normally/smoothly for you?

[leskam]

Yes, it works fine on FF57, and when I use carousel control arrows.

[NTpspE]

I'm having the same issue, works fine in every other browser and version - but when I use firefox developer edition I get white space between slides.

Oddly, if I show the developer tools it generally fixes itself.

[uclnj]

Confirmed with Firefox 58.0b10 (64-bit). The blank space only appears when sliding from right to left (forward motion.) When sliding left to right, the slides transition properly. The transition in Chrome/Edge/IE works as expected with the occasional white line between slides in Edge.

[fabriziobertoglio1987]

I am experiencing this when testing the carousel on my Chrome Android 5.1 Device. I am hosting the app on https://surfcheck.herokuapp.com/ and this is the github of the project, while here is the code from the carousel

I installed the latest bootstrap 4 with yarn. You can test this issue by going to my page https://surfcheck.herokuapp.com/ with a mobile device using chrome 62.0.3202.84

It is doing it also when sliding from left to right, the issue does not present with my chrome 63 responsive browser view.

The app is built with Rails 5.1

Thanks for the amazing Github project!

---

INSTRUCTIONS FOR TESTING THIS ISSUE @Johann-S

I created a jsbin example of this problem
https://jsbin.com/penetoroka/edit?html,output

it does not recreate the issue on my phone. I don't know why. Maybe this is connected to jsbin mobile version.

So I created a recording of this issue
https://drive.google.com/file/d/1DOFQTEoHGwG-CiaQ6GioUhLK_FKGetsX/view?usp=sharing

Basically during the transition

<div class="carousel-item second-image active>...</div>

get the class carousel-item-left to give a smooth transition for the carousel effect

<div class="carousel-item second-image active carousel-item-left">...</div>

and the new image get in the screen with item-next class

<div class="carouse-item third-image carousel-item-next carousel-item-left">..</div>

This transition does not work well on mobile

---

INSTRUCTIONS ON HOW TO TEST THE ISSUE
connect your phone to the computer by usb, open your developer toolbar, more tools -> remote devices
Set up to connect your phone and read more at

https://developer.chrome.com/home

then open a new tab to https://surfcheck.herokuapp.com/ and inspect it .. You will be able to write css/html/js in that page and see the result on the mobile

[iangregory]

Mozilla have a bug open for this: #1425213

[anantajitjg]

Same issue for me with Bootstrap 4 in FF 58.0 and I have found a fix 🙂
I don't know whether this is the right approach, but it worked for me!
I have used, $carousel-transition: transform .5s ease;
and .carousel-item { backface-visibility: visible; }.
So, if you override current .carousel-item styles with these it works perfectly fine!

.carousel-item {
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    -webkit-backface-visibility: visible;
            backface-visibility: visible;
}

I have used the same with bootstrap official documentation example too and there also it works! 😄

[neralex]

Firefox updated to 59.0 - the animation is a bit fast than before but the issue still exists.

[Mibeon]

Yes, the issue is stil there. Also just updated firefox to latest (59) version.
Please fix it fast. We want to use this el in production.

[XhmikosR]

This should be fixed in v4-dev. It'd be nice if someone could confirm.

[XhmikosR]

Closing for now, since it should be fixed in v4-dev. If not leave a comment.

[StayCoolDK]

@XhmikosR - it seems like there is still an issue regarding the transition between slides in Firefox. However @anantajitjg's solution works for me. Firefox 64.0.2 on Android 9.

[mdo]

I still managed to see issues with these half pixels in Firefox with the above patch FWIW.