1432711 - Bootstrap carousel has white spaces between photos

Status: UNCONFIRMED

(Core :: Layout: Images, Video, and HTML Frames, defect, P3)

Description

[theharvestr]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0
Build ID: 20180118215408

Steps to reproduce:

Go to http://exemple.jpmaru.com. You'll see a classical Bootstrap carousel of 4 images. During images transition, there's some kind of white layer.


Actual results:

white "layer" appears when image change.


Expected results:

No white layer between images

Comment 1

[Paul]

Just updated to 58.0.1 and can confirm the same issue, it renders white layer when Bootstrap carousel transitions to the left. Transition to the right seem to continue working just fine.

Please note - the problem affects both Bootstrap v.3 and v.4 and happens even with basic html-only slides. It can be clearly reproduced viewing official Bootstrap carousel examples below.

Bootstrap v.4

http://getbootstrap.com/docs/4.0/examples/carousel/

Bootstrap v.3

https://getbootstrap.com/docs/3.3/javascript/#carousel

Comment 2

[Timothy Nikkel (:tnikkel)]

I'm guessing this is the image not being decoded yet.

Comment 3

[Paul]

Still not fixed as of 58.0.2.

Comment 4

[Jet Villegas (inactive)]

[ Triage 2017/02/20: P3 ]

Comment 5

[matteosilvestri]

Try this:

.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;
}

Comment 6

[David Matthews]

For anyone still finding that this is still an issue with bootstrap carousel and Firefox (and I'm using the latest Firefox as of Sept 2022 and BS 4 and 5)... I have tried just about every method suggested on the forums.... with limited / intermittent success. Latterly, the white flash between carousel items stopped after the first pass-through of the carousel - with backface-visiblity set to visible or hidden - made no difference. But I have now added a z-index value on each carousel-item line (stepped +1 each item), and that has worked.... no white flashed between slides.

Comment 7

[Timothy Nikkel (:tnikkel)]

Can you set decoding="sync" on the img elements in the carousel?

Comment 8

[David Matthews]

All img attributes should work.... sync and async included. But browsers effectively sync carousel images and the image text by default so I'm not sure you're really gaining anything with "sync"... unless other code is generally causing a problem (maybe lazy loading and "async" being the outcome) and then "sync" would hopefully resolve those issues. Checkout the Mozilla site for "image element decoding".

Comment 9

[Timothy Nikkel (:tnikkel)]

(In reply to David Matthews from comment #8)

All img attributes should work.... sync and async included. But browsers effectively sync carousel images and the image text by default so I'm not sure you're really gaining anything with "sync"... unless other code is generally causing a problem (maybe lazy loading and "async" being the outcome) and then "sync" would hopefully resolve those issues. Checkout the Mozilla site for "image element decoding".

What? Do you want to give this comment another try I'm having difficulty undersanding what you are saying. I'm quite familiar with how Firefox does image decoding.

Comment 10

[Timothy Nikkel (:tnikkel)]

Is there an example page where this problem happens?

Comment 11

[David Matthews]

Your original question can be read two ways. I understood it as you having an issue with an img and text being displayed simultaneously, and you then wondering if you can use "sync" in a carousel item line. Obviously I now see that you were asking if "sync" could resolve the white flash issue. It's something I personally haven't checked, and I haven't seen anyone else refer to it as a solution. The forums have lots of examples of people having Firefox white flash issues. I'm simply saying how I recently resolved the problems for my sites (using z-index on bootstrap carousels). I'm simply offering something for people having these issues to additionally try.

Comment 12

[David Matthews]

I think I know why I still see white flashes with bootstrap carousels - it's because I often have transparent sections in the images I use. It's likely why using z-index works. And so "sync" might also do the job.

Comment 13

[Timothy Nikkel (:tnikkel)]

If someone could provide an example of where they see this problem (I've tried to reproduce the problem and I've not been able to so far based on the descriptions here) so that Firefox developers like myself could investigate and potentially fix the bug if it exists.