Skip to content

Commit cb83879

Browse files
nolimits4webnolimits4web
committed
fix: improved 3d rotate fix in Safari
fixes #7532
1 parent fd9f9c0 commit cb83879

File tree

5 files changed

+32
-40
lines changed

5 files changed

+32
-40
lines changed

‎src/modules/effect-coverflow/effect-coverflow.mjs

+5-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import createShadow from '../../shared/create-shadow.mjs';
22
import effectInit from '../../shared/effect-init.mjs';
33
import effectTarget from '../../shared/effect-target.mjs';
4-
import { getSlideTransformEl } from '../../shared/utils.mjs';
4+
import { getRotateFix, getSlideTransformEl } from '../../shared/utils.mjs';
55

66
export default function EffectCoverflow({ swiper, extendParams, on }) {
77
extendParams({
@@ -23,6 +23,7 @@ export default function EffectCoverflow({ swiper, extendParams, on }) {
2323
const center = isHorizontal ? -transform + swiperWidth / 2 : -transform + swiperHeight / 2;
2424
const rotate = isHorizontal ? params.rotate : -params.rotate;
2525
const translate = params.depth;
26+
const r = getRotateFix(swiper);
2627
// Each slide offset from center
2728
for (let i = 0, length = slides.length; i < length; i += 1) {
2829
const slideEl = slides[i];
@@ -57,15 +58,9 @@ export default function EffectCoverflow({ swiper, extendParams, on }) {
5758
if (Math.abs(rotateX) < 0.001) rotateX = 0;
5859
if (Math.abs(scale) < 0.001) scale = 0;
5960

60-
if (swiper.browser && swiper.browser.need3dFix) {
61-
if ((Math.abs(rotateY) / 90) % 2 === 1) {
62-
rotateY += 0.001;
63-
}
64-
if ((Math.abs(rotateX) / 90) % 2 === 1) {
65-
rotateX += 0.001;
66-
}
67-
}
68-
const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;
61+
const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px) rotateX(${r(
62+
rotateX,
63+
)}deg) rotateY(${r(rotateY)}deg) scale(${scale})`;
6964
const targetEl = effectTarget(params, slideEl);
7065
targetEl.style.transform = slideTransform;
7166

‎src/modules/effect-creative/effect-creative.mjs

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import createShadow from '../../shared/create-shadow.mjs';
22
import effectInit from '../../shared/effect-init.mjs';
33
import effectTarget from '../../shared/effect-target.mjs';
44
import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.mjs';
5-
import { getSlideTransformEl } from '../../shared/utils.mjs';
5+
import { getRotateFix, getSlideTransformEl } from '../../shared/utils.mjs';
66

77
export default function EffectCreative({ swiper, extendParams, on }) {
88
extendParams({
@@ -37,6 +37,7 @@ export default function EffectCreative({ swiper, extendParams, on }) {
3737
const { progressMultiplier: multiplier } = params;
3838

3939
const isCenteredSlides = swiper.params.centeredSlides;
40+
const rotateFix = getRotateFix(swiper);
4041

4142
if (isCenteredSlides) {
4243
const margin = slidesSizesGrid[0] / 2 - swiper.params.slidesOffsetBefore || 0;
@@ -89,16 +90,15 @@ export default function EffectCreative({ swiper, extendParams, on }) {
8990
// set rotates
9091
r.forEach((value, index) => {
9192
let val = data.rotate[index] * Math.abs(progress * multiplier);
92-
if (swiper.browser && swiper.browser.need3dFix && (Math.abs(val) / 90) % 2 === 1) {
93-
val += 0.001;
94-
}
9593
r[index] = val;
9694
});
9795

9896
slideEl.style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;
9997

10098
const translateString = t.join(', ');
101-
const rotateString = `rotateX(${r[0]}deg) rotateY(${r[1]}deg) rotateZ(${r[2]}deg)`;
99+
const rotateString = `rotateX(${rotateFix(r[0])}deg) rotateY(${rotateFix(
100+
r[1],
101+
)}deg) rotateZ(${rotateFix(r[2])}deg)`;
102102
const scaleString =
103103
originalProgress < 0
104104
? `scale(${1 + (1 - data.scale) * originalProgress * multiplier})`

‎src/modules/effect-cube/effect-cube.mjs

+8-14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import effectInit from '../../shared/effect-init.mjs';
2-
import { createElement } from '../../shared/utils.mjs';
2+
import { createElement, getRotateFix } from '../../shared/utils.mjs';
33

44
export default function EffectCube({ swiper, extendParams, on }) {
55
extendParams({
@@ -58,6 +58,7 @@ export default function EffectCube({ swiper, extendParams, on }) {
5858
size: swiperSize,
5959
browser,
6060
} = swiper;
61+
const r = getRotateFix(swiper);
6162
const params = swiper.params.cubeEffect;
6263
const isHorizontal = swiper.isHorizontal();
6364
const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
@@ -118,19 +119,12 @@ export default function EffectCube({ swiper, extendParams, on }) {
118119
tx = 0;
119120
}
120121

121-
const transform = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${
122-
isHorizontal ? slideAngle : 0
123-
}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
122+
const transform = `rotateX(${r(isHorizontal ? 0 : -slideAngle)}deg) rotateY(${r(
123+
isHorizontal ? slideAngle : 0,
124+
)}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
124125
if (progress <= 1 && progress > -1) {
125126
wrapperRotate = slideIndex * 90 + progress * 90;
126127
if (rtl) wrapperRotate = -slideIndex * 90 - progress * 90;
127-
if (
128-
swiper.browser &&
129-
swiper.browser.need3dFix &&
130-
(Math.abs(wrapperRotate) / 90) % 2 === 1
131-
) {
132-
wrapperRotate += 0.001;
133-
}
134128
}
135129
slideEl.style.transform = transform;
136130
if (params.slideShadows) {
@@ -161,9 +155,9 @@ export default function EffectCube({ swiper, extendParams, on }) {
161155
}
162156
const zFactor =
163157
(browser.isSafari || browser.isWebView) && browser.needPerspectiveFix ? -swiperSize / 2 : 0;
164-
wrapperEl.style.transform = `translate3d(0px,0,${zFactor}px) rotateX(${
165-
swiper.isHorizontal() ? 0 : wrapperRotate
166-
}deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`;
158+
wrapperEl.style.transform = `translate3d(0px,0,${zFactor}px) rotateX(${r(
159+
swiper.isHorizontal() ? 0 : wrapperRotate,
160+
)}deg) rotateY(${r(swiper.isHorizontal() ? -wrapperRotate : 0)}deg)`;
167161

168162
wrapperEl.style.setProperty('--swiper-cube-translate-z', `${zFactor}px`);
169163
};

‎src/modules/effect-flip/effect-flip.mjs

+5-11
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import createShadow from '../../shared/create-shadow.mjs';
22
import effectInit from '../../shared/effect-init.mjs';
33
import effectTarget from '../../shared/effect-target.mjs';
44
import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.mjs';
5-
import { getSlideTransformEl } from '../../shared/utils.mjs';
5+
import { getRotateFix, getSlideTransformEl } from '../../shared/utils.mjs';
66

77
export default function EffectFlip({ swiper, extendParams, on }) {
88
extendParams({
@@ -44,6 +44,7 @@ export default function EffectFlip({ swiper, extendParams, on }) {
4444
const setTranslate = () => {
4545
const { slides, rtlTranslate: rtl } = swiper;
4646
const params = swiper.params.flipEffect;
47+
const rotateFix = getRotateFix(swiper);
4748
for (let i = 0; i < slides.length; i += 1) {
4849
const slideEl = slides[i];
4950
let progress = slideEl.progress;
@@ -65,21 +66,14 @@ export default function EffectFlip({ swiper, extendParams, on }) {
6566
rotateY = -rotateY;
6667
}
6768

68-
if (swiper.browser && swiper.browser.need3dFix) {
69-
if ((Math.abs(rotateY) / 90) % 2 === 1) {
70-
rotateY += 0.001;
71-
}
72-
if ((Math.abs(rotateX) / 90) % 2 === 1) {
73-
rotateX += 0.001;
74-
}
75-
}
76-
7769
slideEl.style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
7870

7971
if (params.slideShadows) {
8072
createSlideShadows(slideEl, progress, params);
8173
}
82-
const transform = `translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
74+
const transform = `translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateFix(
75+
rotateX,
76+
)}deg) rotateY(${rotateFix(rotateY)}deg)`;
8377
const targetEl = effectTarget(params, slideEl);
8478
targetEl.style.transform = transform;
8579
}

‎src/shared/utils.mjs

+9
Original file line numberDiff line numberDiff line change
@@ -319,6 +319,14 @@ function elementOuterSize(el, size, includeMargins) {
319319
function makeElementsArray(el) {
320320
return (Array.isArray(el) ? el : [el]).filter((e) => !!e);
321321
}
322+
function getRotateFix(swiper) {
323+
return (v) => {
324+
if (Math.abs(v) > 0 && swiper.browser && swiper.browser.need3dFix && Math.abs(v) % 90 === 0) {
325+
return v + 0.001;
326+
}
327+
return v;
328+
};
329+
}
322330
export {
323331
animateCSSModeScroll,
324332
deleteProps,
@@ -344,4 +352,5 @@ export {
344352
elementTransitionEnd,
345353
elementOuterSize,
346354
makeElementsArray,
355+
getRotateFix,
347356
};

0 commit comments

Comments
 (0)