位置固定的圆形图像 - css

Question

我试图在chrome和mozilla中找到固定位置的圆形图像，但它在某种程度上无法用于镀铬。

这是我的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的两个结果： -

出现正确，直到我没有放置位置：固定并给出特定的高度和宽度

Answer 1

尝试添加：

.circular img {
    position: static;
}

如果不起作用：

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

我注意到如果img是position：fixed，我可能会遇到同样的问题。也许它以某种方式继承了Chrome版本的windows版本。变换可以强制重绘，也可以修复它

转变观念的归功：Chrome rendering issue. Fixed position anchor with UL in body