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，各种材质设计按钮），它们使用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样式，但它不会改变任何内容。但是，如果我从position: absolute;标记中删除img样式，则不会闪烁。因此，必须是导致此问题的position: absolute;，border-radius和transform之间的某种互动。

Answer 1

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

从此处更改dill标记的样式：

>>> import dill
>>> pickle.dumps(types.ModuleType)
"cdill.dill\n_load_type\np0\n(S'ModuleType'\np1\ntp2\nRp3\n."
>>>

对此：

img

（删除position: absolute; left: -40%;样式。）

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

Answer 2

我认为使用position和border-radius有一个错误。它在这些问题的答案中也有报道，当人们移除位置属性时，边界半径工作正常。 StackOverflow Question 1这个也是StackOverflow Question 2

Answer 3

只需添加：

-webkit-backface-visibility: hidden;

进入css。

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

3 个答案: