Blank space between slides - Carousel

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

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.

Sorry, updated first post.

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?

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

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.

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.

@Johann-S

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

Mozilla have a bug open for this: #1425213

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! 😄

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

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.

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

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

@XhmikosR

@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.

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

Unclear what the scope of this issue remains. I put together https://codepen.io/emdeoh/pen/dypqxZQ with v4.5.3, which if you click quickly between the indicators, you'll see a brief flash of blue sometimes in the latest Firefox for macOS (as well as Safari fwiw). Making the change from above would undo #27594 effectively, so I'm unsure how best to proceed, if at all.

if folks are still seeing this issue, let's get a new, fresh issue opened with a solid demo that can demonstrate the issue. Thanks!

Navigation Menu

Repository navigation

Blank space between slides - Carousel #24657

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Blank space between slides - Carousel #24657

Description

Activity

Johann-S commented on Nov 3, 2017

leskam commented on Nov 3, 2017

Grukdon commented on Nov 10, 2017

leskam commented on Nov 10, 2017

NTpspE commented on Dec 7, 2017

uclnj commented on Dec 13, 2017

fabOnReact commented on Dec 14, 2017

iangregory commented on Jan 2, 2018

anantajitjg commented on Jan 25, 2018

neralex commented on Mar 13, 2018

mibeon commented on Mar 15, 2018

XhmikosR commented on Nov 6, 2018

XhmikosR commented on Nov 21, 2018

StayCoolDK commented on Jan 16, 2019

mdo commented on Mar 23, 2020

mdo commented on Jan 12, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions