css转换期间div边框半径闪烁

Question

我有一个非常简单的网页，用作 Angular-Material 包的游乐场。它包括以下部分：

HTML：

<div class="margin-right community-photo">
  <img class="circle" src="images/cookiemonster-small.png">
</div>
<div flex layout="column" class="pad-vert">
  <span class="bold">C. Monster</span>
  <span>C is for Cookie, and Cookie is for me.</span>
  <span class="v-small-text">1 day ago</span>
</div>

SCSS：

div.community-photo {
    position: relative;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 50%;

    img {
        position: absolute;
        width: 120px;
        left: -40%;
        border-radius: 50%;
    }
}

在页面的其他部分，我有一些元素（FAB、各种 Material Design 按钮）使用 CSS 转换来实现按钮滑出、透明气泡等效果。

<md-fab-speed-dial md-open="social.isOpen" md-direction="left" class="md-fling fixed-low-right" hide-sm show-md show-lg show-gt-lg>
    <md-fab-trigger>
        <md-button aria-label="Social Links" class="md-fab md-warn">
            <md-tooltip md-direction="top">Like Us!</md-tooltip>
            <md-icon class="material-icons">&#xE8DC;</md-icon>
        </md-button>
    </md-fab-trigger>
    <md-fab-actions>
        <md-button class="md-fab md-raised md-mini" href="">
            <md-tooltip md-direction="top">Facebook</md-tooltip>
            <md-icon class="fa fa-lg fa-facebook"></md-icon>
        </md-button>
        <md-button class="md-fab md-raised md-mini" href="">
            <md-tooltip md-direction="top">Twitter</md-tooltip>
            <md-icon class="fa fa-lg fa-twitter"></md-icon>
        </md-button>
        <md-button class="md-fab md-raised md-mini" href="">
            <md-tooltip md-direction="top">Pinterest</md-tooltip>
            <md-icon class="fa fa-lg fa-pinterest"></md-icon>
        </md-button>
        <md-button class="md-fab md-raised md-mini" href="">
            <md-tooltip md-direction="top">Instagram</md-tooltip>
            <md-icon class="fa fa-lg fa-instagram"></md-icon>
        </md-button>
        <md-button class="md-fab md-raised md-mini" href="">
            <md-tooltip md-direction="top">YouTube</md-tooltip>
            <md-icon class="fa fa-lg fa-youtube"></md-icon>
        </md-button>
        <md-button class="md-fab md-raised md-mini" href="">
            <md-tooltip md-direction="top">LinkedIn</md-tooltip>
            <md-icon class="fa fa-lg fa-linkedin"></md-icon>
        </md-button>
    </md-fab-actions>
</md-fab-speed-dial>

此元素使用 Javascript 将带有 opacity: 1; z-index: 6; transform: translateX(56px); 的样式标签应用到隐藏时的按钮，当它们滑出时它会移除。 transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2) CSS 样式提供动画。

奇怪的是，当我使用这些元素时，从 CSS 变换动画开始到结束，我的 div 上的 border-radius 会闪烁。它看起来像这样：

它看起来只有 1 秒钟，直到 CSS 转换完成，但它是闪烁的，这让我很难过。实际的 CSS 属性不会被 Javascript 或任何东西改变，它只是闪烁。

需要明确的是，肯定是 border-radius 属性出现故障，仅此而已。图片本身要大得多，所以我知道overflow: hidden 保持不变。它没有向右跳，所以我知道绝对定位很好。但是由于某种原因，边界半径会瞬间闪烁。

为什么会发生这种情况？我知道还有其他方法可以向我的网站添加圆形图片（例如 CSS background），但这种方法似乎是最直观的，我想保留它。

我尝试将!important 添加到border-radius 样式中，但它并没有改变任何东西。但是，如果我从 img 标记中删除 position: absolute; 样式，它不会闪烁。因此，一定是position: absolute;、border-radius和transform的某种交互导致了问题。

Answer 1

希望有人有更好的答案，但我发现了一个很好的解决方法。

从这里更改img标签的样式：

position: absolute;
left: -40%;

到这里：

margin-left: -40%;

（删除position: absolute 样式。）

这做同样的事情并且不会闪烁。

Answer 2

我认为同时使用位置和边框半径存在错误。它也在这些问题的答案中报告，当人们删除位置属性时，边界半径工作正常。 StackOverflow Question 1 这个也是-StackOverflow Question 2

Answer 3

只需添加：

-webkit-backface-visibility: hidden;

进入css。