css - 如何修复Safari中的CSS转换错误？

Question

我需要制作一个类似https://codepen.io/dobladov/pen/kXAXJx的滑块。但是它在Safari中无法正常工作。每当我单击“下一个”或“上一个”按钮时，它都会抽搐。谁能帮助我修复错误或给我一个指向Safari上可用的其他滑块的链接。

div
    position: absolute
    transition: transform 1s, left 1s, opacity 1s, z-index 0s
    opacity: 1

    img
      width: 400px
      transition: width 1s

    &.hideLeft
      left: 0%
      opacity: 0
      transform: translateY(50%) translateX(-50%)

      img
        width: 200px

    &.hideRight
      left: 100%
      opacity: 0
      transform: translateY(50%) translateX(-50%)
      img
        width: 200px

    &.prev
      z-index: 5
      left: 30%
      transform: translateY(50px) translateX(-50%)

      img
        width: 300px

    &.prevLeftSecond
      z-index: 4
      left: 15%
      transform: translateY(50%) translateX(-50%)
      opacity: .7

      img
        width: 200px

    &.selected
      z-index: 10
      left: 50%
      transform: translateY(0px) translateX(-50%)

    &.next
      z-index: 5
      left: 70%
      transform: translateY(50px) translateX(-50%)

      img
        width: 300px

    &.nextRightSecond
      z-index: 4
      left: 85%
      transform: translateY(50%) translateX(-50%)
      opacity: .7

      img
        width: 200px

我尝试使用 translate3D(50%, 50%, 0)而不是 translateY(50%) translateX(-50%)。

Answer 1

使用https://autoprefixer.github.io/避免跨浏览器平台的冲突。