3D rotating carousel, bug in desktop and mobile Safari

[dietererni]

3D rotating carousel, bug in desktop and mobile Safari, displace transform-origin-z coordinate, pushed forward in the browser.

From Post https://www.sitepoint.com/building-3d-rotating-carousel-css-javascript/
I found that Safari does not show the carousel right, do you have a conclusion?
on that site is also the codepen “gRJWqm”

HTML

<h1>3D Rotating Carousel Examples</h1>

<h2>Eight images, with 20px gap</h2>
<div class="carousel" data-gap="20">
	<figure>
    <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="">
		<XXX src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
		<XXX src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
		<XXX src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
		<XXX src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="">
		<XXX src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="">
		<XXX src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="">
		<XXX src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="">
<!-- XXX=img-->
	</figure>
	<nav>
		<button class="nav prev">Prev</button>
		<button class="nav next">Next</button>
	</nav>
</div>

SCSS

body {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
}

h1 {
  text-align: center;
  margin-bottom: 1.5em;
}

h2 {
	text-align: center;
	color: #555;
  margin-bottom: 0;
}

// Carousel configuration parameters
$item-width: 40%; // Now we can use percentages!
$item-separation: 0px; // This now is set with Js
$viewer-distance: 500px;

.carousel {
	padding: 20px;

	perspective: $viewer-distance;
	overflow: hidden;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	> * {
		flex: 0 0 auto;
	}
	
	figure {
		margin: 0;
		
		width: $item-width;
		transform-style: preserve-3d;
		transition: transform 0.5s;
		
		img {
			width: 100%;
			box-sizing: border-box;
			padding: 0 $item-separation / 2;
			
			&:not(:first-of-type) {
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}
	
	nav {
		display: flex;
		justify-content: center;
		margin: 20px 0 0;
		
		button {
			flex: 0 0 auto;
			margin: 0 5px;
			
			cursor: pointer;
			
			color: #333;
			background: none;
			border: 1px solid;
			letter-spacing: 1px;
			padding: 5px 10px;
		}
	}
	
}

javascript

window.addEventListener('load', () => {
	var
		carousels = document.querySelectorAll('.carousel')
	;

	for (var i = 0; i < carousels.length; i++) {
		carousel(carousels[i]);
	}
});

function carousel(root) {
	var
		figure = root.querySelector('figure'),
		nav = root.querySelector('nav'),
		images = figure.children,
		n = images.length,
		gap = root.dataset.gap || 0,
		bfc = 'bfc' in root.dataset,
		
		theta =  2 * Math.PI / n,
		currImage = 0
	;
	
	setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
	window.addEventListener('resize', () => { 
		setupCarousel(n, parseFloat(getComputedStyle(images[0]).width)) 
	});

	setupNavigation();

	function setupCarousel(n, s) {
		var	
			apothem = s / (2 * Math.tan(Math.PI / n))
		;
		
		figure.style.transformOrigin = `50% 50% ${- apothem}px`;

		for (var i = 0; i < n; i++)
			images[i].style.padding = `${gap}px`;
		for (i = 1; i < n; i++) {
			images[i].style.transformOrigin = `50% 50% ${- apothem}px`;
			images[i].style.transform = `rotateY(${i * theta}rad)`;
		}
		if (bfc)
			for (i = 0; i < n; i++)
				 images[i].style.backfaceVisibility = 'hidden';
		
		rotateCarousel(currImage);
	}

	function setupNavigation() {
		nav.addEventListener('click', onClick, true);
		
		function onClick(e) {
			e.stopPropagation();
			
			var t = e.target;
			if (t.tagName.toUpperCase() != 'BUTTON')
				return;
			
			if (t.classList.contains('next')) {
				currImage++;
			}
			else {
				currImage--;
			}
			
			rotateCarousel(currImage);
		}
			
	}

	function rotateCarousel(imageIndex) {
		figure.style.transform = `rotateY(${imageIndex * -theta}rad)`;
	}
	
}

If you wish to see a Site: “formdesign.ch/webdesign/ideen/”

I’ve tried to use hardcoded values for apothem or theta, but couldn’t find a solution. here noted: “a bug in desktop and mobile Safari, which displaces the transform-origin-z coordinate for the gallery, pushing it forward in the browser.” http://thenewcode.com/736/Advanced-CSS-3D-Carousel. What is the Problem, I found other solutions like “3dtransforms.desandro.com/carousel”. they have not that Problem.