search

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.21k stars 78.77k forks source link

Latest Firefox breaks the Carousel component on Bootstrap 4.1.3 #27525

Closed thomaspapanikolaou closed 5 years ago

thomaspapanikolaou commented 5 years ago

Updating to the latest version of Firefox breaks the Carousel component on Bootstrap 4.1.3

Environment

Test Case for reproduction

Notes This issue is posted here because previous Bootstrap versions do not show the problem, specifically

To verify Bootstrap 4.0.0. works visit https://getbootstrap.com/docs/4.0/components/carousel/ with the latest Firefox 63.0 (64-bit)

Cheers, Thomas

Johann-S commented 5 years ago

Carousel work on my FF 63 with Win10 but I don't have the slide animation 😨

thomaspapanikolaou commented 5 years ago

Hi @Johann-S, what I called "broken" is indeed that the slide animation does not work. Can you confirm that when you visit https://getbootstrap.com/docs/4.0/components/carousel/ (which uses Bootstrap 4.0.0) you do see the slide animation? This can still be a Bootstrap 4.1.3 bug.

alecpl commented 5 years ago

Sliding works for me with Firefox 63.0 (64-bit) on Ubuntu. I see no difference in behavior between Firefox and Chrome.

thomaspapanikolaou commented 5 years ago

I tested also with Safari 12

Environment

Results

patrickhlauke commented 5 years ago

this relates to the prefers-reduced-motion media query which we added to bootstrap, and how Firefox 63 now adopts this (see https://bugzilla.mozilla.org/show_bug.cgi?id=1365045)

for windows 10 version: Firefox now looks at the "Show animations in Windows" option in windows settings. if that's set to off, it interprets this as a desire to have no animations overall and the prefers-reduced-motion: reduce media feature kicks in, which removes all transitions.

capture

personally, i think this is a bit of a heavy-handed approach on the part of Firefox. i hate the Win 10 animations because they're twee and slow me down when working...not because i prefer no animations ever in any content. though arguably it's more the fact that - to my knowledge - it's not possible to turn off Windows' specific animations separately while keeping this global option set to on.

on macOS, Firefox looks at the accessibility option for reduced motion - this makes more sense, as this is an active choice overall to reduce motion, not just "don't show the animations in the OS".

screenshot 2018-10-27 at 14 32 28

for Linux i have no idea where/if there's a global option somewhere for a user to signal they prefer reduced motion...

in any case, this behaves correctly (albeit surprisingly for some users).

patrickhlauke commented 5 years ago

@neoschronos can you confirm if you have the "reduce motion" setting enabled in macOS by any chance?

patrickhlauke commented 5 years ago

oh and as for macOS/Safari, same deal ... Safari looks at that "reduce motion" setting, which then sets off the prefers-reduced-motion media feature test.

see https://getbootstrap.com/docs/4.1/getting-started/accessibility/#reduced-motion (noting the copy there now needs updating as it's not just Safari/macOS anymore)

patrickhlauke commented 5 years ago

@mdo @Johann-S wonder if we should explicitly add a little note, with reference to https://getbootstrap.com/docs/4.1/getting-started/accessibility/#reduced-motion, to specific components that are visibly affected/obey the reduced motion setting to avoid this sort of confusion?

thomaspapanikolaou commented 5 years ago

@patrickhlauke yes, the "reduce motion" setting was enabled in my settings. After disabling, slide animation "works" on Firefox 63.0 and Safari 12.0. Many thanks.

W.r.t to the "confusion"-level: it will depend on how many users have the "reduce motion" setting enabled. If there are many, honoring prefers-reduced-motion will results to bad user experience (I will go on a limb and say it is a big deal whether a carousel slides smoothly, or flashes the images, as is the case when the browsers honor the prefers-reduced-motion media query you added). Every Boootstrap 4.1.3+ owner might end up having to provide an explanation like you did with me ... that is not optimal.

Therefore, In addition to your suggestion for a note about this at specific components, I would also suggest documenting a way for developers to disable the prefers-reduced-motion media query in Bootstrap (at build-time or programatically). Again, whether this is a good idea, depends on how many users have the "reduce motion" setting enabled on their accessibility settings without knowing they do.

To clarify: I did not set "Reduce motion" in my accessibility settings, it was preset.

patrickhlauke commented 5 years ago

To clarify: I did not set "Reduce motion" in my accessibility settings.

it's not something that's set by default. so i'm wondering how this happened...

thomaspapanikolaou commented 5 years ago

@patrickhlauke I can't help with an answer. If, however, "Reduce motion" is not a default setting, than all is good and a note, as you suggested, is the solution. Many thanks.

@Johann-S did you set the "Show animations in Windows" to "Off" or was it a preset?

Johann-S commented 5 years ago

Yep that was me who set "Show animations in Windows" to "Off" because it slow down my computer.

Maybe we should provide a way in our carousel to force the animation ? (adding a css class or something)

patrickhlauke commented 5 years ago

i think having it as a configurable option for authors to enable/disable the prefers-reduced-motion stuff in general would be good (rather than now doing one specifically for carousel). incidentally, i'm floating the idea here about windows needing to be more specific/granular https://twitter.com/somelaniesaid/status/1056554604530425861

XhmikosR commented 5 years ago

Agreed, an option to toggle this should be fine for now but we might consider default this to enabled in v5.

zaqxen commented 4 years ago

Carousel work on my FF 63 with Win10 but I don't have the slide animation 😨

if you are using bootstrap (CSS) 4.1 or higher you can fix it by adding inline style 

<style>
.carousel-item{
        transition: -webkit-transform .6s ease;
        transition: transform .6s ease;
        transition: transform .6s ease,-webkit-transform .6s ease;
    }
</style>

Had the same issue so I took the CSS animation which was working on Bootstrap 4.0

XhmikosR commented 4 years ago

Please read the above comments.