Geek Answers Handbook

Invalid CSS blur display when cropping in Chrome with accelerated hardware

I have a problem with filter: blur() in Chrome. I used transform: translate3d(0, 0, 0) to encourage hardware acceleration, and it greatly improved performance (I use it sparingly). I have an element and I set before background image and blur. I set its extents outside the bounds of its containing element.

Wrong on the left, correct on the right. Please note that this is an insert.

Below is a screenshot of what is happening in Chrome. The hardware accelerated version is on the left, and not the hardware acceleration on the right. Please note: a blur with soft edges appears on the left.

It seems that in Chrome, when hardware acceleration accelerates, the item is clipped with overflow before it erodes, causing feathered edges.

Besides disabling hardware acceleration, which slows down the performance of this blur with a large radius, is there a way to get Chrome to blur before cropping?

I gave an example test case below.

Thanks!

  div { width: 200px; height: 200px; position: absolute; box-sizing: border-box; overflow: hidden; border: 2px solid red; } div::before { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg); content: ""; display: block; position: absolute; left: -200px; top: -200px; width: calc(100% + 400px); height: calc(100% + 400px); background-size: calc(100% + 400px) calc(100% + 400px); filter: blur(60px); -webkit-filter: blur(60px); z-index: 1; } #incorrect::before { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #incorrect { left: 100px; top: 100px; } #correct { right: 100px; top: 100px; } 
 <html> <body> <div id="incorrect"></div> <div id="correct"></div> </body> </html>
+7
css google-chrome css-transforms css-filters
source share
1 answer

You can try setting the last property "translation-value-z" to #incorrect::before on 1. I don’t know why, but it seemed to work.

The translation-value-z is the third vector value and defines the translation in the direction of the z axis (3rd dimension). Caution: This can only be a length value, the percentage is not supported.

For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d

  div { width: 200px; height: 200px; position: absolute; box-sizing: border-box; overflow: hidden; border: 2px solid red; } div::before { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg); content: ""; display: block; position: absolute; left: -200px; top: -200px; width: calc(100% + 400px); height: calc(100% + 400px); background-size: calc(100% + 400px) calc(100% + 400px); filter: blur(60px); -webkit-filter: blur(60px); z-index: 1; } #incorrect::before { -webkit-transform: translate3d(0, 0, 1); -ms-transform: translate3d(0, 0, 1); transform: translate3d(0, 0, 1); } #incorrect { left: 100px; top: 100px; } #correct { right: 100px; top: 100px; } 
 <html> <body> <div id="incorrect"></div> <div id="correct"></div> </body> </html>
0
source share

More articles:


All Articles