155288 2016-03-09 21:11:36 -0800 Compositing layer is too large when inner element has a blur that is within bounds 2016-03-09 23:26:45 -0800 1 1 1 Unclassified WebKit Layout and Rendering WebKit Nightly Build Unspecified OS X 10.11 RESOLVED INVALID P2 Normal --- 81239 1 jonlee webkit-unassigned dino simon.fraser zalan oldest_to_newest 1172991 0 273543 jonlee 2016-03-09 21:11:36 -0800 Created attachment 273543 Sample test case See attached test case. The first example has: <div class="container"> <div class="particle" style="filter:blur(10px)"></div> </div> particle is fixed 80x80, the container is 100x100. The 10px blur should make the particle 100x100 large, but the compositing layer (see web inspector) shows a 136x136 layer. For example 2, the blur on the container should be 120x120, but it's 156x156 instead. It's strange in example 3 that the layer is 100x100, but the blur extends past. I think example 4 is correct? 1173006 1 simon.fraser 2016-03-09 22:38:02 -0800 For the first square: renderer().style().filterOutsets().expandRect(unionBounds); is adding 28px on each side for the 10px blur. This comes from outsetSizeForBlur() which has this comment: // We take the half kernel size and multiply it with three, because we run box blur three times. The kernel size is 19x19, which is computed by: unsigned size = std::max<unsigned>(2, static_cast<unsigned>(floorf(value * gaussianKernelFactor() + 0.5f))); where gaussianKernelFactor() returns 1.87997127 This is emulating the suggested approximation the SVG spec <https://www.w3.org/TR/SVG/filters.html#feGaussianBlurElement> 1173007 2 simon.fraser 2016-03-09 23:01:59 -0800 http://dbaron.org/log/20110225-blur-radius also explains this well. "The SVG feGaussianBlur filter primitive has a stdDeviation attribute, which takes the standard deviation (σ) of the Gaussian blur. So in SVG, the number given is half the number that you would give to get the same blur with CSS or canvas." I think when dbaron says "with CSS" he's referring to box-shadow. The CSS blur filter matches SVG. This means that "filter: blur(10px)" and "box-shadow: 0 0 10px black" don't match which is sad. 1173010 3 simon.fraser 2016-03-09 23:18:56 -0800 For box-shadow we do this: // Blurring uses a Gaussian function whose std. deviation is m_radius/2, and which in theory // extends to infinity. In 8-bit contexts, however, rounding causes the effect to become // undetectable at around 1.4x the radius. const float radiusExtentMultiplier = 1.4; but recall that box-shadow's "radius" is actually 2 * sigma, so I think this agrees with the 3 * 1.87997127 / 2 = 2.82 for SVG. 1173012 4 simon.fraser 2016-03-09 23:26:45 -0800 To summarize your test case: First square: filter: blur(10px) extends the 80x80 circle by a factor of 10 * (3 * 1.87997127 / 2) = 28px on each side, so the resulting layer size is correct. Second square: filter is composited, and extends the 100x100 container now by 28px per side, hence the 156x156. Third square: filters apply after overflow:hidden, so it's clipped, then blurred. Fourth square: filters apply after rect clipping, so it's clipped, then blurred. 273543 2016-03-09 21:11:36 -0800 2016-03-09 21:11:36 -0800 Sample test case test2.html text/html 857 jonlee PHN0eWxlPgouY29udGFpbmVyIHsKCWJhY2tncm91bmQtY29sb3I6IHllbGxvdzsKCXdpZHRoOiAx MDBweDsKCWhlaWdodDogMTAwcHg7Cglwb3NpdGlvbjogcmVsYXRpdmU7Cgl0cmFuc2Zvcm06IHRy YW5zbGF0ZVooMCk7Cn0KCi5wYXJ0aWNsZSB7Cglwb3NpdGlvbjogYWJzb2x1dGU7Cglib3JkZXIt cmFkaXVzOiA1MCU7CgliYWNrZ3JvdW5kLWNvbG9yOiBncmVlbjsKCXdpZHRoOiA4MHB4OwoJaGVp Z2h0OiA4MHB4OwoJdG9wOiAxMHB4OwoJbGVmdDogMTBweDsKfQo8L3N0eWxlPgo8cD4xMHB4IGJs dXIgb24gdGhlIGlubmVyIHBhcnRpY2xlICg4MHB4KSwgY29udGFpbmVyIGlzIDEwMHB4PC9wPgo8 ZGl2IGNsYXNzPSJjb250YWluZXIiPgoJPGRpdiBjbGFzcz0icGFydGljbGUiIHN0eWxlPSJmaWx0 ZXI6Ymx1cigxMHB4KSI+PC9kaXY+CjwvZGl2Pgo8cD4xMHB4IGJsdXIgb24gY29udGFpbmVyPC9w Pgo8ZGl2IGNsYXNzPSJjb250YWluZXIiICBzdHlsZT0iZmlsdGVyOmJsdXIoMTBweCkiPgoJPGRp diBjbGFzcz0icGFydGljbGUiPjwvZGl2Pgo8L2Rpdj4KPHA+MTBweCBibHVyIG9uIGNvbnRhaW5l ciwgb3ZlcmZsb3c6aGlkZGVuPC9wPgo8ZGl2IGNsYXNzPSJjb250YWluZXIiIHN0eWxlPSJmaWx0 ZXI6Ymx1cigxMHB4KTtvdmVyZmxvdzpoaWRkZW47Ij4KCTxkaXYgY2xhc3M9InBhcnRpY2xlIj48 L2Rpdj4KPC9kaXY+CjxwPjEwcHggYmx1ciBvbiBjb250YWluZXIsIHJlY3QgY2xpcDwvcD4KPGRp diBjbGFzcz0iY29udGFpbmVyIiBzdHlsZT0iZmlsdGVyOmJsdXIoMTBweCk7Y2xpcDogcmVjdCgw cHgsMHB4LDEwMHB4LDEwMHB4KTsiPgoJPGRpdiBjbGFzcz0icGFydGljbGUiPjwvZGl2Pgo8L2Rp dj4=