Question

我正在研究一个完美的 CSS 过渡，除了在 Safari 中。当我在 Safari 中使用以下代码时，您可以看到在悬停/退出 X 图标时发生了小的偏移。
在我的代码中，我制作了一个 rotateZ(90deg)，但对于代码片段，我使用了一个 rotateZ(0deg)，因为即使没有旋转，您也可以看到发生了偏移。

.tabs-container {
    height: 50px;
}

.tab {
    height: 100%;
    display: inline-flex;
    float: left;
}

.text {
    display: flex;
    align-items: center;
}

.icon-container {
    background-color: lightblue;
    display: inline-flex;
}

.icon-container:hover {
    background-color: gold;
}

.icon-container>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

svg {
    transition: transform 0.5s;
}

svg:hover {
    transform: rotateZ(0deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div class="tabs-container">
        <div class="tab">
            <div class="text">
                Hello
            </div>
            <div class="icon-container">
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我尝试了各种方法，例如 position: absolute 上的 icon-container，它有效地阻止了偏移的发生，但我希望它与 flex 定位一起使用。另一件要注意的事情是，它与变换的类型无关，即使是平移或 0 度旋转，偏移也会出现。
这是 Safari 中的错误吗？还是我做错了什么？

Safari - flex 元素内的 CSS 转换问题

0 个答案: