CSS 过渡在 Safari 中不起作用（使用 flexbox 和变换）答案

【问题标题】：CSS transition not working in Safari (using flexbox and transform)CSS 过渡在 Safari 中不起作用（使用 flexbox 和变换）
【发布时间】：2016-04-11 16:57:21
【问题描述】：

我为网页主导航中的导航项进行了 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;
  }
}

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

【问题讨论】：

你在 windows 上尝试过 safari 吗？
寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。尽管您提供了一个示例链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。
@RaimondasKazlauskas Windows 上的 Safari ！？
@SlimMarten 对不起，我试图理解这个问题。如果问题出在 flexbox 上，您可以尝试添加前缀吗？显示：-webkit-box；显示：-webkit-flex；对于转换：-webkit-transform
我的生产样式表中的 @RaimondasKazlauskas 都是添加的所有必要的供应商前缀。为了简单起见，我没有在上面的问题中添加它们

标签： html css cross-browser flexbox

【解决方案1】：

您的代码也无法在 Internet Explorer 9 上运行。您只需要添加::

对于 Safari--

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

对于 IE9--

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

希望它有效。

【讨论】：

正如我在上面的 cmets 中提到的，所有供应商前缀都添加到编译的样式表中。为了简单起见，我没有在这里添加它们。不，...它不能解决问题