Question

当我添加透视旋转和滤镜时：blur（）。

Firefox（44.0.2），Chrome（48.0.2564.116（64位）），Safari（9.0.3）对此没有任何问题。我的Chromium版本是51.0.2666.0（64位） - Canary Build：378711，从2016年3月2日开始。我尝试了几个版本的Chromium，似乎没有版本可行。

我的设置：MacOs 10.11.3，带Retina显示屏的MacBook。

我制作了一支笔，包括截图，它应该是什么样的。你能重现这个错误吗？你在第三个盒子上看到阴影吗？

.wrap {
  perspective: 600px;
  transform-style: preserve-3d;
  position: relative;
}

.with--perspective:before {
    transform: rotateX(90deg);
}

.with--blur:before {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
}

.with--changedperspective:before {
  transform: rotateX(85deg);
}



/*

 some stuff for this example
*/

.find-the-error {
  display: flex;
  padding: 50px;
}

.wrap{
  display: block;
  margin: 5px;
  width: 240px;
  background: #eaeaea;
  text-align: center;
  padding: 30px;
  flex-basis: 25%;
}  

.wrap:before {
  content: '';
  position: absolute;
  bottom: -2rem;
  left: 5%;
  width: 90%;
  height: 2em;
  background: rgba(0,0,0,0.9);
  opacity: 0.2;
}

.screenshot {
  text-align: center;
  
  img {
    max-width: 100px;
  }
}

<div class="find-the-error">
<div class="wrap with--perspective">
  no blur <br>
  perspective works
</div>

<div class="wrap with--blur">
  no perspective <br>
  blur works
</div>

<div class="wrap with--blur with--perspective">
  adding both <br>
  perspective seems to work but blur hides all (only visible in devtools)
</div>

<div class="wrap with--blur with--changedperspective">
  adding a rotation of 85deg<br>
  shows both, blur and perspective, but blur looks strange
</div>
</div>

<div class="screenshot">
  <img width="100" height="103" title="" alt="" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCABnAGQDAREAAhEBAxEB/8QAdgABAQEAAwEBAAAAAAAAAAAAAAQDAQUGAggBAQAAAAAAAAAAAAAAAAAAAAAQAAEDAgIFCgUDBAMAAAAAAAEAAgMRBBIFIVHRFAYxQZGhwRNTk1QVInKCNEVhMgdxgUIjUjMWEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwD9OXV5NFMWNDaUB0150GXuNxqb0Hage43GpvQdqB7jcam9B2oHuNxqb0Hage43GpvQdqB7jcam9B2oHuNxqb0Hage43GpvQdqB7jcam9B2oHuNxqb0Hage43GpvQdqCreJNy76gx0rTm5UEl/90flCCZAQEBAQEBAQEBAQX/i/p7UGN/8AdH5QgmQEBAJAGJxDWjlcSAB/coAc0uLA4F40lgILgP1HKEDRUAkAnkBNCf6a0HPJSuipoK6KnloNZQcICAgIL/xf09qDG/8Auj8oQTICDmiDy/EHCfE+aZpczQ5nFHk9zDBAcrlZOWVjdifKSxwGOoq0DQf86oJW8EcXVke3OYYZriUSz3ELblr5C0ihccWnHhbiaDh5hoQZZfw7xNmnDjTmeYNhvRmcl/a30dw6bu4ML4wI5Yy0MczFXQcLiPiABIQZzcI59eZh3X/oo5swtoYpnxE3GKIskc5ly0Md/rdOTV7eQaQz4NCD3hZKGhz2mtBiNKCvOQg+UBAQX/i/p7UGN/8AdH5QgmQEEOd5SzNsuNi+4mtAZYpRcWzsEzDC8PGB3MTSnPo5kHkm8IcPztAnzpu9R3W6TySRxwPlkZM4OiczGysryWhsrdOJocK8iDSLgjJXS29OICb657xsc9s6KOad7qvL2YJHAyfDjcQKOIJpyhBHLwTwrcR3mTniLARCHXDGmFjQTI4umFXYCXSAtmaNBFGupoQdvm/DfD+Y5jJf3GcQRzzyMkjDXQAd9bRxwVAxjH+yjmH/AJFqDjJuAsrsc2t80tMzmuZLKSVr6ubIXuJdjileHHSzHgpSoAAQetQEBBf+L+ntQY3/AN0flCCZAQEHmr3+PeHb2/kvrp92+aWSaUtE+FjXXH/ZgaG/DXkCDTKuAuHMqvLe8s2TNuLeJkIc57aPZHG+ICRrWNaSWSuBIAP6oMR/HHDYfbPcbmV1q1scTpZGPJjYTRjyY/ibQ0NdJAFTXSgH+OOFzJ3mCfvO7bFixsJ7uMkxt0sP7AcIPLQCpJ0oO2yDIMuyHLRl2X95u4kfLWVwe8ukNTicA3FqqdOslB2KAgIL/wAX9Pagxv8A7o/KEEyAgICAgICAgICAgv8Axf09qDG/+6PyhBMgICAgICAgICAgIL/xf09qDG/+6PyhBMgICAgICAgICAgIL/xf09qD5vLaeScuYyraAVqEGO53Xh9Y2oG53Xh9Y2oG53Xh9Y2oG53Xh9Y2oG53Xh9Y2oG53Xh9Y2oG53Xh9Y2oG53Xh9Y2oG53Xh9Y2oG53Xh9Y2oG53Xh9Y2oK+5l3DusP+zDTDo1oN5XSBpMbcTuYE0QQOuM+r8NrDTmq9BxvHEHpIfMKBvHEHpIfMKBvHEHpIfMKBvHEHpIfMKBvHEHpIfMKBvHEHpIfMKBvHEHpIfMKBvHEHpIfMKBvHEHpIfMQb202ZudS4t2MGtj6oLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQf/9k=" />

</div>

CSS透视，过滤器组合不适用于最新的铬

0 个答案: