Bootstrap: Content flashes in carousel during transitions on firefox for android

[chrisbloom7]

I originally opened this as a question on SO, but I've since found several other instance in the wild where this happens, so it's not specific to my site. Wondering if it's a bug in Bootstrap, though interestingly I can't replicate this on the carousel example on getbootstrap.com.

From the SO post:

We're doing some final testing on a responsive design and we've discovered an issue on our homepage carousel, but it's only happening on Firefox for Android - not Chrome for Android, not Firefox desktop (not even in responsive design mode), and not on any iOS devices.

Anytime the carousel rotates, either automatically or manually, a black box flashes across the middle after the new slide appears. It is only there for less then a second, then it disappears.

I know it's occurring at some point in the Carousel.prototype.slide function (somewhere between line 144 and line 164 in the source on Github), but I have no idea what element it's occurring on or what specific line is triggering it. I've tried stepping through it in Firefox's remote debugger to no avail.

FWIW, the black box does not occur when viewing the stock Bootstrap carousel demo in Firefox for Android.

We are using the latest version of Bootstrap (3.2.0).

Example 1: https://dl.dropboxusercontent.com/u/9530717/firefox-android-black-box/index.html

Example 2: http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=carousel (you can only see it if you click the button that opens the output in a new window)

Example 3: http://www.bootply.com/render/ErniW7HVND

Example 4: http://jsfiddle.net/mattdlockyer/gjPVJ/4/embedded/result/

[twbs-lmvtfy]

Hi @chrisbloom7!

You appear to have posted a live example (http://s.bootply.com/render/ErniW7HVND), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 223, column 119: < in attribute name. Probable cause: > missing immediately before.
• line 223, column 132: Element pthis not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[cvrebert]

(Validator complaints about the Fiddle are false positives.)

[chrisbloom7]

Do I need to post an updated fix to keep this open? The other examples also show the same behavior.

[hnrch02]

FWIW, the black box does not occur when viewing the stock Bootstrap carousel demo in Firefox for Android.

What do you mean by that? Can you reproduce this on getbootstrap.com?

[chrisbloom7]

I mean if I view http://getbootstrap.com/javascript/#carousel on Firefox for Android I don't see the content flash like I do on the other examples. My guess is it's because that carousel doesn't have any background images in the slides.

[chrisbloom7]

Screenshot from the SO question showing the blackbox at the 1st example URL:

[hnrch02]

Can you reproduce using http://jsbin.com/kanedo/1? Also, which version of Android and Firefox are you running?

[chrisbloom7]

Android 4.4.2, Firefox 32.0.3

[chrisbloom7]

In your jsbin example, I see a small flash at the bottom of slides 2 and 3 when they transition.

[chrisbloom7]

Here's an interesting barebones example:

Example 1: http://jsfiddle.net/sLoaxgma/1/ - When I view that in Ff on Android, I see the flash the first time the slides are transitioned to. After that, no flash. (Results only: http://jsfiddle.net/sLoaxgma/1/embedded/result/)

Example 2: http://jsfiddle.net/sLoaxgma/3/ - Image replaced with scaled BG image, and the flash happens on every transition. (Results only: http://jsfiddle.net/sLoaxgma/3/embedded/result/)

[hnrch02]

I doubt that there is much we can do about this. Maybe file a bug with Mozilla?

[cvrebert]

Have you tried testing against Firefox Beta for Android?

[chrisbloom7]

@hnrch02 I don't think this is a bug in Firefox, and here's why:

http://jsfiddle.net/sLoaxgma/15/embedded/result/ - This example uses Bootstrap's carousel functionality
http://jsfiddle.net/sLoaxgma/16/embedded/result/ - This example is exactly the same as the previous, except it does not include the Bootstrap JS file and instead uses an embedded JS function that duplicates the basic mechanics of the Bootstrap Carousel plugin.

In the former example, the flash is present in Ff for Android. In the latter example, the flash is not present. It therefore seems reasonable to assume that it has something to do with Bootstrap internals, and not Firefox's handling of CSS transitions or background images.

[chrisbloom7]

Actually, I think I was mistaken. Sometimes it's flashing in both examples, sometimes it's not flashing in either... Let me do some further testing.

[chrisbloom7]

I'm stumped. I think it has something to do with the carousel controls/glyphicons, but I can't be sure. There's a lot of moving parts here and I haven't been able to isolate one particular thing that triggers it. Maybe it's something to do with the Bootstrap Carousel plugin, maybe it's some combination of rules in the Bootstrap CSS, maybe it's Firefox's handling of certain CSS 3 properties. I've created over 30 test variants and at this point the results are unpredictable. I'm just going to tell my client that it's a feature.

[cvrebert]

@chrisbloom7 Could you please file a Firefox bug about this?: https://bugzilla.mozilla.org/enter_bug.cgi#h=bugForm%7CFirefox+for+Android
Thanks!

[chrisbloom7]

As I wrote last month, "I've created over 30 test variants and at this point the results are unpredictable". Without consistent steps to reproduce, I can't file a bug because I don't know what triggers it.

[cvrebert]

Well, a heisenbug is still better than no bug at all.

[cvrebert]

Closing as an apparent browser bug that we can't workaround.
If you do file a Firefox bug, we'd be happy to list it on http://getbootstrap.com/browser-bugs/

[dumptyd]

Probably a little late, but after hours of banging my head on this one what worked was setting backface-visibility to visible on .carousel-inner .item. I was having this exact same issue on Firefox dev edition.

[pachooca]

The solution @dumptyd brought is what solved the problem here.

[ashaikh-wal]

I have flickering slide issue faced on Mozilla on Android, i don't understand why its happening however same is working perfectly on iPhone devices.

thanks in advance.