如何修复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/来避免跨浏览器平台的冲突。