| Summary: | Optimize clip-path rendering on stack overflow.com | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Simon Fraser (smfr) <simon.fraser> |
| Component: | Compositing | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | kkinnunen, simon.fraser, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Local Build | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
We don't use the composited clip path approach here, and instead fall back on the layer + mask approach, because the clip-path references an SVG element, and we don't yet have code to compute composited clip paths via referenced elements. We also repaint both the mask and the primary layer when any repaint happens, because we're not smart enough to work out if a change only affects the layer, not the mask. |
stackoverflow.com has an element with a clip-path that is expensive to rendering, especially with GPU process: <div style="clip-path:url(#curve)" class="p32 sm:p12 bar-lg p-bg-dark-gradient d:fc-black-750 ps-relative z-selected fc-black-025 p-font-smooth mbn128 pb128"> <svg width="0" height="0" class="ps-absolute"> <defs> <clipPath id="curve" clipPathUnits="objectBoundingBox"> <path d="M0,0 H1 V0.988 a0.007,0.012,0,0,1,-0.009,0.011 C0.955,0.983,0.802,0.925,0.501,0.925 C0.2,0.925,0.045,0.984,0.009,1 A0.007,0.012,0,0,1,0,0.988"></path> </clipPath> </defs></svg>