html - Div border-radius 在 css 变换期间闪烁

Question

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

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-指数: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 背景)，但这种方式似乎是最直观的，我想保留它。

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

Answer 1

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

更改 img 标签的样式:

position: absolute;
left: -40%;

对此:

margin-left: -40%;

(删除 position: absolute 样式。)

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