Why does rotated blurred element get cropped off?

user_2472910 0
Viewed 58

This is the example: https://jsfiddle.net/0w4bcy93/

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  transform: rotateX(40deg) rotateY(0deg) rotateZ(0deg);
}

.circle--1 {
  filter: blur(10px) opacity(1);
}
<div class="circle circle--1"></div>

<div class="circle circle--2"></div>

Both has the same styling except .circle--1 has filter blur. Is this a browser issue?

edit: You can also try increasing the rotateX and the cropped area will be bigger

edit2: I logged a bug in Chromium https://bugs.chromium.org/p/chromium/issues/detail?id=1108298

google-chrome css
1 Answers

In case of it's a chrome bug itself. There's a cheat way to work around. By using a parent filter layer to blur.

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  transform: rotateX(75deg) rotateY(0deg) rotateZ(0deg);
}
.blur-filter {
  filter: blur(10px);
  width: 100px;
  height: 100px;
}
.circle--1 {
  filter: opacity(1);
}
<div class="blur-filter">
  <div class="circle circle--1"></div>
</div>

<div class="circle circle--2"></div>

user_68877460
Related