Question

我在Chromium中发现了一个错误。

似乎引擎在某种特殊层中呈现转换。应该隐藏在border-radius上溢出的部分内容，但不是。

请看这个例子：http://jsbin.com/nijavunoqe/1/edit?html,css,output

将鼠标悬停在颜色方块上。你会注意到动画角是可见的。而且它影响邻居元素。 Firefox和IE都可以。

所以，问题是：是否有可能找到绕过这个bug并让它按预期工作的方法？

Answer 1

.container
  border: 1px solid red
  width: 200px
  height: 200px
  border-radius: 20px
  overflow: hidden

  margin-bottom: 10px

img
  height: 220px
  width: 220px
  margin-top: -10px
  margin-left: -10px
  cursor: pointer
  transition: width 1s, height 1s, margin-top 1s, margin-left 1s

  &:hover
    height: 240px
    width: 240px
    margin-top: -20px
    margin-left: -20px

您可以在平均时间内使用此代码。那些变形被打破了，我甚至都没有注意到。

请注意，我已将.content更改为img。它没有直接使用.container工作，但我相信你可以从这里调整它。

Chromium中的Bug与渲染css转换过渡

1 个答案: