在Safari浏览器中，使用flexbox和transform时，CSS过渡效果无法正常工作

Question

我在网站主导航中为导航项创建了CSS过渡效果。

这是一个相对简单的效果，使用项目前的元素来遮罩和隐藏文本，使用CSS转换和Flexbox布局。

我在Chrome中开发，并在Firefox和Safari（所有最新版本）中进行了测试，然而我发现Safari无法正确显示过渡效果。

我创建了一个简短的示例，让您可以了解该效果。

http://cssdeck.com/labs/owntbier

有办法修复吗？ 我想这与Safari解释“justify-content”属性的方式有关。

以下是代码：

HTML

<div class="container">
  <ul>
    <li>WHY SAFARI, WHY?</li>
  </ul>
</div>

SCSS

.container{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%)   translateY(-50%);
}

ul{
  list-style-type: none;
}

li{
  white-space: nowrap;
  position: relative;
  color: #ff9900;
  cursor: pointer;
  font-size: 5vw;
  font-weight: 900;

  &:hover{

    &:before{
      max-width: 100%;
    }
  }

  &:before{
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #131313;
    content: 'WHY SAFARI, WHY?';
    display: flex;
    justify-content: center;
    overflow: hidden;
    max-width: 0%;
    transition: max-width 0.5s ease;
  }
}

注意 我的预处理器会自动添加必要的供应商前缀。

- Marten Zander

---

你在Windows上试过Safari吗？ - Raimondas Kazlauskas

寻求代码帮助的问题必须在问题本身中包含最短的代码以便复现。虽然您已经提供了一个示例链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他SO用户将毫无价值。 - Paulie_D

@RaimondasKazlauskas Safari 在 Windows 上！？ - Marten Zander

@SlimMarten 抱歉问一下，但我试图理解问题。如果问题出在flexbox上，您可以尝试添加前缀吗？ display: -webkit-box; display: -webkit-flex;对于transforms： -webkit-transform - Raimondas Kazlauskas

@RaimondasKazlauskas 在我的生产样式表中，所有必要的供应商前缀都已添加。为了简单起见，我没有在上面的问题中添加它们。 - Marten Zander

Answer 1

你的代码在Internet Explorer 9上无法运行。 你只需要添加以下内容：::

对于Safari--

**-webkit-transform:translateX(-50%)   translateY(-50%);**

对于IE9--

**-ms-transform:translateX(-50%)   translateY(-50%);**

希望它能正常工作。

- Ashish Thapa

---

正如我在上面的评论中提到的，所有供应商前缀都会添加到编译后的样式表中。出于简单起见，我没有在这里添加它们。但是，这并不能解决问题。 - Marten Zander