The border radius does not apply if the visibility of the back is hidden in the child

Question

I have a pair of the divs, one inside the other, I'm using border-radiusand overflow: hiddenon the outer div, which creates a circular mask on the inner div.

It works, however, when used backface-visibility: hidden;on a child div border-radiusno longer applies.

Here is an example of a problem that can be seen in chrome and safari

Answer 1

This seems to be a webkit bug that is being tracked on the chrome track . It seems that in the near future there will be no attempts to unite.

Answer 2

, . W3schools , " : "; . 3D-, ? .



. " " div, . , , . div , .



, , , , . :

<p>Backface hidden:</p>
<div class="ex">
  <div class="mask bfh">
    <div class="bg"></div>
  </div>
</div>

css:

.bfh {
  -webkit-backface-visibility:hidden;
  -webkit-transform: rotateY(30deg);
}

Answer 3

@Rob chrome- , viktorli.

Just add the rule transformto the parent of the rogue child, not following the rule overflow:hidden, and it will be fixed! sort of:

-webkit-transform: scale(1);