html - CSS 过渡在 Safari 中不起作用(使用 flexbox 和转换)

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

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

Answer 1

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

对于 Safari--

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

对于 IE9--

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

希望它有用。