Question

我为网页主导航中的导航项目进行了css过渡。

这是一个相对简单的效果，使用元素前面的项来使用css变换和flexbox屏蔽和隐藏文本。

我在Chrome中开发并在Firefox和Safari（所有最新版本）中进行了测试，并且必须发现Safari不能正确显示转换。

我创建了一支短笔，因此您可以了解效果。

有什么办法可以解决吗？我想这与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%);**

希望它有效。

CSS转换无法在Safari中工作（使用flexbox和转换）

1 个答案: