Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Carousel slide (fade) flicker at the end of rotation transition

See original GitHub issue

On Safari (macOS/iOS), the fade transition from the last to the first slide causes an flicker for a moment. Prevent this by set z-index property value one step lower:

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0; /* set to -1 and prevent flicker on Safari */
  opacity: 0;
  transition: 0s 0.6s opacity;
}

Tested in Safari 11.1.2 and Mobile Safari 12.1.4.

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:12 (10 by maintainers)

Top GitHub Comments

2reactions

mdocommented, Feb 18, 2019

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

This is a saved reply.

0reactions

XhmikosRcommented, Aug 12, 2019

https://github.com/postcss/autoprefixer/issues/965#issuecomment-355973866

So IMO autoprefixer is fine. Either way, this is an upstream issue if the prefixes change matters at all, and should be reported there.