html - 位置固定的圆形图像 - css

Question

我试图在 chrome 和 mozilla 中获得位置固定的圆形图像，但它在 chrome 中以某种方式失败。

这是我的CSS：-

.circular{

    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
    border: 5px solid white;
    overflow: hidden;
    position: fixed;
    height: 100px;
    width: 100px;
    left: 80px;
    top: 20px;
}

这是我的html：-

 <div class='circular'>
              <div class='round-image'>
                <img alt="Portfolio_page" src="/assets/portfolio_page.png" />
              </div>
            </div>

这是 chrome 和 mozilla 中的两个结果：-

在我没有放置 position: fixed 并给出特定的高度和宽度之前，它一直正常显示

Answer 1

尝试添加：

.circular img {
    position: static;
}

如果这不起作用：

.circular{
    -webkit-transform: translateZ(0);
}

我注意到如果 img 是位置，我可能会遇到同样的问题：已修复。也许它以某种方式继承了 Windows 版 chrome 的位置。转换可以强制重新绘制，这也可能修复它

转换想法的功劳：Chrome 渲染问题。体内带有 UL 的固定位置锚