Div 边界半径在 css 变换期间闪烁

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 设计按钮）使用 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 变换动画开始到它结束的时间，border-radius我的 div 闪烁。看起来像这样：

在 CSS 转换完成之前，它看起来只持续 1 秒钟，但它是一种闪烁，这让我很难过。实际的 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

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

Answer 3

只需添加：

-webkit-backface-visibility: hidden;

进入css.

Div 边界半径在 css 变换期间闪烁

Div border-radius flickers during css transform

html

css

css-transitions

css-transforms

angular-material