Skip to content

Commit 96b49d7

Browse files
MartijnCuppensXhmikosR
authored andcommitted
Fix Edge bounce and restore original transition easing (#27279)
1 parent f20e46e commit 96b49d7

File tree

2 files changed

+7
-30
lines changed

2 files changed

+7
-30
lines changed

scss/_carousel.scss

Lines changed: 6 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -23,55 +23,32 @@
2323
position: relative;
2424
width: 100%;
2525
overflow: hidden;
26+
@include clearfix();
2627
}
2728

2829
.carousel-item {
2930
position: relative;
3031
display: none;
31-
align-items: center;
32+
float: left;
3233
width: 100%;
33-
backface-visibility: hidden;
34-
perspective: 1000px;
34+
margin-right: -100%;
35+
@include transition($carousel-transition);
3536
}
3637

3738
.carousel-item.active,
3839
.carousel-item-next,
3940
.carousel-item-prev {
4041
display: block;
41-
@include transition($carousel-transition);
4242
}
4343

44-
.carousel-item-next,
45-
.carousel-item-prev {
46-
position: absolute;
47-
top: 0;
48-
}
49-
50-
.carousel-item-next.carousel-item-left,
51-
.carousel-item-prev.carousel-item-right {
52-
transform: translateX(0);
53-
54-
@supports (transform-style: preserve-3d) {
55-
transform: translate3d(0, 0, 0);
56-
}
57-
}
58-
59-
.carousel-item-next,
44+
.carousel-item-next:not(.carousel-item-left),
6045
.active.carousel-item-right {
6146
transform: translateX(100%);
62-
63-
@supports (transform-style: preserve-3d) {
64-
transform: translate3d(100%, 0, 0);
65-
}
6647
}
6748

68-
.carousel-item-prev,
49+
.carousel-item-prev:not(.carousel-item-right),
6950
.active.carousel-item-left {
7051
transform: translateX(-100%);
71-
72-
@supports (transform-style: preserve-3d) {
73-
transform: translate3d(-100%, 0, 0);
74-
}
7552
}
7653

7754

scss/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1007,7 +1007,7 @@ $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg
10071007
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
10081008

10091009
$carousel-transition-duration: .6s !default;
1010-
$carousel-transition: transform $carousel-transition-duration ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
1010+
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
10111011

10121012

10131013
// Close

0 commit comments

Comments
 (0)