Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Carousel fade in fade out text transition is not smooth (v5.1.3) #35181

Closed
3 tasks done
sinjuangajan opened this issue Oct 13, 2021 · 3 comments · Fixed by #35587
Closed
3 tasks done

Carousel fade in fade out text transition is not smooth (v5.1.3) #35181

sinjuangajan opened this issue Oct 13, 2021 · 3 comments · Fixed by #35587
Labels
docs v5

Comments

@sinjuangajan
Copy link

Prerequisites

Describe the issue

Carousel fade in fade out transition is not smooth when using text only. please fix this.
Please check codepen link below
Bootstrap v5.1.3
Chrome 94.0.4606.81 (64-bit)
Windows 10 Pro 19042.1237

Animation

Reduced test cases

Codepen

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.1.3
@mdo
Copy link
Member

mdo commented Oct 13, 2021

Set a background-color on .carousel-item and it'll be smooth. The problem arises from no background being set by default, which we're unlikely to change. Perhaps we need to mention this in our docs.

mdo added a commit that referenced this issue Oct 13, 2021
@mdo
Add note to carousel crossfade docs about bg color
d1b6ab2 
Fixes #35181
@sinjuangajan
Copy link
Author

sinjuangajan commented Oct 14, 2021 •
edited
Loading

Yes it worked. Thanks Mark :)

@hermbo
Copy link

hermbo commented Nov 12, 2021

This is related to _carousel.scss on line 81

@include transition(opacity 0s $carousel-transition-duration);

Setting the opacity 0s to at least 1s solves it, or removing it.

@mdo Please fix if possible by providing it a variable if it needs to remain.

@XhmikosR XhmikosR mentioned this issue Dec 22, 2021
Merged
XhmikosR added a commit that referenced this issue Dec 23, 2021
@XhmikosR @mdo @ffoodd
Add note to carousel crossfade docs about bg color (#35587)
deb8e3f 
Fixes #35181

Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
docs v5
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add note to carousel crossfade docs about bg color twbs/bootstrap
3 participants
@mdo @sinjuangajan @hermbo