渲染CSS转换过渡时Chromium中的错误

Question

I found a bug in Chromium.

It seems that the engine renders transitions in some kind of special layer. Part of content which overflows over border-radius should be hidden, but it is not.

Look at this example: http://jsbin.com/nijavunoqe/1/edit?html,css,output

Hover mouse over color squares. You will notice that while animation corners are visible. And furthermore it affects neighbour element. Firefox and IE are ok.

So, the question is: Is it possible to find a way around this bug and get it to work as expected?

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

You can use this code in the mean time for chrome. Those transforms are broken as hell I've never even noticed.

Just note that I changed your .content to img. It didn't work straight off the bat with .container but I'm sure you can tweak it from here.