WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED CONFIGURATION CHANGED
136482
Filters have weird clipping on compositing tile borders
https://bugs.webkit.org/show_bug.cgi?id=136482
Summary
Filters have weird clipping on compositing tile borders
Dirk Schulze
Reported
2014-09-03 06:07:48 PDT
On compositing tiles, filters are clipped and refiltered. This has really strange effects on gaussian blur filters. See the example at
http://codepen.io/adobe/pen/eJHgl
move the slider for the bottom iframe up and down.
Attachments
when a html-element is larger as the screen, than the drawing of th html-element is getting irritated by the standard-copositing-border-matrix
(3.38 KB, text/html)
2014-09-26 07:44 PDT
,
Lutz
no flags
Details
html-element with svg-filter gets irritated by compositing-borders
(4.06 KB, text/html)
2014-09-26 07:47 PDT
,
Lutz
no flags
Details
when a html-element is larger as the screen, than the drawing of th html-element is getting irritated by the standard-copositing-border-matrix
(3.36 KB, text/html)
2014-09-26 07:51 PDT
,
Lutz
no flags
Details
Show Obsolete
(1)
View All
Add attachment
proposed patch, testcase, etc.
Dirk Schulze
Comment 1
2014-09-03 07:46:36 PDT
(In reply to
comment #0
)
> On compositing tiles, filters are clipped and refiltered. This has really strange effects on gaussian blur filters. See the example at
http://codepen.io/adobe/pen/eJHgl
move the slider for the bottom iframe up and down.
A static tile grid doesn't work great for many SVG filters. There will always be situations where feDisplacementMap, feDropShadow, lightning filters, feGaussianBlur need pixels from different tiles. For feDisplacementMap it can even be hard to impossible to predict the exact area of possibly requested pixels.
Dirk Schulze
Comment 2
2014-09-03 08:20:32 PDT
It seems to be correct for CSS filter functions. I'd like to understand what is going on. It seems that we filter the whole element area for every tile. So for blur(10px) we would blur the element twice if the element is part of two tiles. Is that correct? Or are there other optimizations that just let us copy the margin area of the element that is required by the blur() filter? Even with the optimization (if it is implemented at all), SVG Filters like feDisplacementMap would suffer from the same problem and we would need to filter the whole element area.
Radar WebKit Bug Importer
Comment 3
2014-09-03 10:31:01 PDT
<
rdar://problem/18216351
>
Lutz
Comment 4
2014-09-26 07:44:14 PDT
Created
attachment 238715
[details]
when a html-element is larger as the screen, than the drawing of th html-element is getting irritated by the standard-copositing-border-matrix when a html-element is larger (height or width) as the screen, than the drawing of th html-element (with an svg-filter applied) is getting irritated by the standard-copositing-border-matrix. The workarounds (to get separate Layer with) did not helps when element is bigger than screen, because compositing gets than again the standard-matrix(tile-size). Example-Workarounds which did not help in this case: -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) translate3d(0, 0, 0); -webkit-transform: scale(1); -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;
Lutz
Comment 5
2014-09-26 07:47:18 PDT
Created
attachment 238716
[details]
html-element with svg-filter gets irritated by compositing-borders
Lutz
Comment 6
2014-09-26 07:51:27 PDT
Created
attachment 238717
[details]
when a html-element is larger as the screen, than the drawing of th html-element is getting irritated by the standard-copositing-border-matrix when a html-element is larger as the screen, than the drawing of th html-element is getting irritated by the standard-copositing-border-matrix when a html-element is larger (height or width) as the screen, than the drawing of th html-element (with an svg-filter applied) is getting irritated by the standard-copositing-border-matrix. The workarounds (to get separate Layer with) did not helps when element is bigger than screen, because compositing gets than again the standard-matrix(tile-size). Example-Workarounds which did not help in this case: -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) translate3d(0, 0, 0); -webkit-transform: scale(1); -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;
Simon Fraser (smfr)
Comment 7
2024-09-06 13:51:56 PDT
I don't see any issues with the examples in this bug now.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug