3

How do I force clip a child to a parent element that has rounded corners.

<div class="item" >
  <div class="top">
    <h1>Tile</h1>
    <h2>Click me</h2>
  </div>
  <div class="behind">
    <h3>Details</h3>
  </div>
</div>

When animating the child, its ignores the border-radius of the parent element. Is there a way to fix the two corners on the top? 

.item{
  text-align: center;
  cursor: pointer;
  overflow: hidden; 
  height: 280px;
  width: 280px;
  float: left;
  border-radius: 5px;
  background: white;
  margin: 10px; 
  position: absolute;
}
.top{
  z-index: 1;
  position: absolute;
  height: 280px;
  width: 280px;
  background: #ed844b;
  transition: 0.3s; 
  border-radius: 5px;
}
.behind{
  z-index: 0;
  position: absolute;
  width: 100%;
  top: 136px;
  height: 138px;
  padding: 10px 16px;
  background: #DDDDDD;   
  box-sizing: border-box;
  border-radius: 5px;
}
.slide-up{
  transform: translate3d(0, -136px, 0);   
  border-radius: 0px;
}

Here is a little demo: http://codepen.io/Koopa/pen/xbaMez

Thanks

Koopa

Luxbit
  • 172
  • 1
  • 2
  • 11

1 Answers1

4

When you add a css 3d transform to the child, you kinda move it to the separate GPU layer. You can move parent element to GPU layer instead adding null-transform hack transform: translateZ(0) to .item. Or you can replace translate with translateY (In this case child is clipped only when not being animated).

Paul Kozlovitch
  • 786
  • 7
  • 12
  • Thanks for your answer. Sadly translateZ(0) does not help. TanslateY is working, but the problem persists while the animation is going on – Luxbit Mar 10 '15 at 11:53
  • [It works for me](http://codepen.io/ThiRaBrTNK/pen/MYPgaa). Tested in latest stable Chrome and FF Mac/Win. – Paul Kozlovitch Mar 10 '15 at 15:23
  • 1
    It's a [bug in Safari](https://bugs.webkit.org/show_bug.cgi?id=140535). It can be workarounded with `-webkit-mask-image: -webkit-radial-gradient(circle, white, black);` [updated fiddle](http://codepen.io/ThiRaBrTNK/pen/MYPgaa) – Paul Kozlovitch Mar 11 '15 at 09:41