When I click on the button to rotate the carousel, it doesn’t work on Safari.

I have a div that contains my carousel (caroucel – container) in which there is my div carousel which contains my images (cell). When you press one of the buttons the div carousel rotates with transform: rotateY.

I think the problem is with Javascript and EventListener ‘click’.

HTML

<section>                     <div class="portfolio">                         <div class="portfolio__content column">                             <div class="caroucel--container">                                 <div class="carousel">                                     <div class="cell img-1">                                         <div class="img--warpper"></div>                                     </div>                                     <div class="cell img-2">                                         <div class="img--warpper"></div>                                     </div>                                     <div class="cell img-3">                                         <div class="img--warpper"></div>                                     </div>                                     <div class="cell img-4">                                         <h2>Lyon</h2>                                         <div class="img--warpper"></div>                                     </div>                                     <div class="cell img-5">                                         <div class="img--warpper"></div>                                     </div>                                     <div class="cell img-6">                                         <div class="img--warpper"></div>                                     </div>                                 </div>                              </div>                             <div class="buttons">                                 <div class="buttons--left">                                     <div class="button--left"></div>                                 </div>                                 <div class="buttons--right">                                     <div class="button--right"></div>                                 </div>                             </div>                         </div>                     </div>                 </section> 

SCSS

    .portfolio {         .portfolio__content {             .caroucel--container {                 height: 60vw;                 width: 60vw;             }             .carousel {                 width: 100%;                 height: 100%;                 transform: translateZ(-51.961vw);                 [class^="cell img-"] {                     width: 50vw;                     height: 50vw;                     left: 5vw;                     top: 5vw;                 }             }                  @for $i from 1 through 5 {                 .cell:nth-child(#{$i + 1}) { transform: rotateY(#{$i * 60}deg) translateZ(-51.961vw); }             }                  .cell:nth-child(1) { transform: rotateY(0deg) translateZ(-51.961vw); }              .buttons {                 margin: 2vw 0;             }         }     } } 

JS

{  let carousel = document.querySelector('.carousel'); let cellCount = 6; let selectedIndex = 0;  function rotateCarousel() {   let angle = selectedIndex / cellCount * -360;    if (!isMobile) {     carousel.style.transform = 'translateZ(-60vw) rotateY(' + angle + 'deg)';     carousel.style.webkitTransform = 'translateZ(-60vw) rotateY(' + angle + 'deg)';     carousel.style.MozTransform = 'translateZ(-60vw) rotateY(' + angle + 'deg)';   }else {     carousel.style.transform = 'translateZ(-51.961vw) rotateY(' + angle + 'deg)';     carousel.style.webkitTransform = 'translateZ(-51.961vw) rotateY(' + angle + 'deg)';     carousel.style.Moztransform = 'translateZ(-51.961vw) rotateY(' + angle + 'deg)';   } }  let prevButton = document.querySelector('.buttons--left'); prevButton.addEventListener( 'click', function() {   selectedIndex--;   rotateCarousel(); });  let nextButton = document.querySelector('.buttons--right'); nextButton.addEventListener( 'click', function() {   selectedIndex++;   rotateCarousel(); });  }