css - Chromium 中带有渲染 css 转换过渡的错误

Question

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

似乎引擎在某种特殊层中渲染过渡。溢出 border-radius 的部分内容应该被隐藏，但实际上没有。

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

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

因此，问题是:是否有可能找到解决此错误的方法并使其按预期工作？

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

您可以同时将此代码用于 chrome。我从未注意到，那些转换被破坏得一塌糊涂。

请注意，我将您的 .content 更改为 img。使用 .container 并不能立即正常工作，但我相信您可以从这里对其进行调整。