В Safari центр 3D Карусели не правильный, Edge, Chrome работает нормально - PullRequest
Новая
       151

В Safari центр 3D Карусели не правильный, Edge, Chrome работает нормально

0 голосов
/ 03 апреля 2019

Я использую Guid здесь: https://www.sitepoint.com/building-3d-rotating-carousel-css-javascript/, работает нормально, но не в сафари.Я пытаюсь выяснить, чем Safari отличается от других браузеров в этом случае.Я предполагаю, что определенная математическая функция, такая как: theta = 2 * Math.PI / numImages, в Safari создает другую ссылку, чтобы найти центр в трехмерном пространстве, ось Z.

Я не могу действительно копать намного глубже сам.Я должен попытаться переместить объект немного дальше от экрана по оси Z 

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head
 <body>
<div class="carousel">
    <figure>
   <img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="" name="bar">
    <img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="" name="bar1">
        <img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="" name="bar2">
        <img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="" name="bar3">
        <img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="" name="bar4">
        <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="" name="bar5">
    <img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="" name="bar6">
        <img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="" name="bar7">
    </figure>
    <nav>
        <button class="nav prev">Prev</button>
        <button class="nav next">Next</button>
    </nav>
</div>
  <!-- Modal -->
  <div class="modal fade" id="bar" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Options</h4>
        </div>
        <div class="modal-body">
          <p>Modal content..</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
<!-- Modal -->
  <div class="modal fade" id="bar1" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">Modal 1 Options</h4>
        </div>
        <div class="modal-body">
          <p>Modal 1 content..</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
</div>
  <!-- Modal -->
  <div class="modal fade" id="bar2" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">Modal Options</h4>
        </div>
        <div class="modal-body">
          <p>Modal content..</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
</div>
<!-- Modal -->
  <div class="modal fade" id="bar3" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">Modal 3</h4>
        </div>
        <div class="modal-body">
          <p>Modal 3 content..</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
</div>
 </body>

$('img').on('click', function(){
//  $(this).css({"background-color": "yellow", "font-size": "200%"})
  var name = $(this).attr('name');
 // console.log(name);
  $('#' + name).modal({show: true});
});


var
    carousel = document.querySelector('.carousel'),
    figure = carousel.querySelector('figure'),
    nav = carousel.querySelector('nav'),
    numImages = figure.childElementCount,
    theta =  2 * Math.PI / numImages,
    currImage = 0
;

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--;
    }

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

body {
  margin: 0;
  font-family: "Roboto";
  font-size: 16px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
}

.plakat {
  width: 100%

}

.carousel {
  padding: 20px;
  -webkit-perspective: 500px;
          perspective: 500px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.carousel > * {
  flex: 0 0 auto;
}
.carousel figure {
  margin: 0;
  width: 400px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform-origin: 50% 50% -482.8427124746px;
          transform-origin: 50% 50% -482.8427124746px;
}
.carousel figure img {
  width: 100%;
  box-sizing: border-box;
  padding: 0 40px;
  opacity: 0.9;
}
.carousel figure img:not(:first-of-type) {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform-origin: 50% 50% -482.8427124746px;
          transform-origin: 50% 50% -482.8427124746px;
}
.carousel figure img:nth-child(2) {
  -webkit-transform: rotateY(0.7853981634rad);
          transform: rotateY(0.7853981634rad);
}
.carousel figure img:nth-child(3) {
  -webkit-transform: rotateY(1.5707963268rad);
          transform: rotateY(1.5707963268rad);
}
.carousel figure img:nth-child(4) {
  -webkit-transform: rotateY(2.3561944902rad);
          transform: rotateY(2.3561944902rad);
}
.carousel figure img:nth-child(5) {
  -webkit-transform: rotateY(3.1415926536rad);
          transform: rotateY(3.1415926536rad);
}
.carousel figure img:nth-child(6) {
  -webkit-transform: rotateY(3.926990817rad);
          transform: rotateY(3.926990817rad);
}
.carousel figure img:nth-child(7) {
  -webkit-transform: rotateY(4.7123889804rad);
          transform: rotateY(4.7123889804rad);
}
.carousel figure img:nth-child(8) {
  -webkit-transform: rotateY(5.4977871438rad);
          transform: rotateY(5.4977871438rad);
}
.carousel nav {
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
}
.carousel nav button {
  flex: 0 0 auto;
  margin: 0 5px;
  cursor: pointer;
  color: #333;
  background: none;
  border: 1px solid;
  letter-spacing: 1px;
  padding: 5px 10px;
}

Вот кодекс: https://codepen.io/scribbi/pen/ZPRzrp

это должно выглядеть так:3d Carousel

Но это выглядит так: wrong rendering 3D carousel

Как мы видим здесь: http://thenewcode.com/736/Advanced-CSS-3D-Carousel проблемауже существует, Safari "смещает координату transform-origin-z для галереи, продвигая ее вперед в браузере"

, по какой-то причине он вращается вокруг центра пятого изображения, в то время как первое изображение располагаетсяглубже в карусели.Здесь используется другой подход: https://codepen.io/scribbi/pen/BEjJLY работает в этих браузерах, SCSS не используется и требуется дополнительное жесткое кодирование.Как хорошо, это еще не отзывчиво.может быть связано: -webkit-transform-style: preserve-3d не работает

...