NEW314320
SVG clip-path reference fails to resolve through chained <use> from external sprite on iOS WebKit
https://bugs.webkit.org/show_bug.cgi?id=314320
Summary SVG clip-path reference fails to resolve through chained <use> from external ...
paronson
Reported 2026-05-07 07:05:36 PDT
On iOS WebKit, an SVG element using clip-path="url(#id)" does not get clipped when the element lives inside a <symbol> that is reached via a chain of <use> references where the entry point is <use href="external.svg#symbol">. The clipPath silently fails to apply and the geometry renders unclipped. The same SVG renders correctly on macOS Safari, Chrome, Firefox, and Edge on desktop, and on Chrome and Firefox on Android. Steps to reproduce ▎ 1. Create sprite.svg containing two symbols. The inner symbol defines a <clipPath> and references it from a child ▎ element via clip-path="url(#clip)". The outer symbol contains only <use href="#inner"/>: ▎ ▎ <svg xmlns="http://www.w3.org/2000/svg"> ▎ <symbol id="inner" viewBox="0 0 64 64"> ▎ <defs> ▎ <clipPath id="clip"><circle cx="32" cy="32" r="20"/></clipPath> ▎ </defs> ▎ <rect width="64" height="64" fill="red"/> ▎ <g clip-path="url(#clip)"> ▎ <rect width="64" height="64" fill="blue"/> ▎ </g> ▎ </symbol> ▎ <symbol id="outer" viewBox="0 0 64 64"> ▎ <use href="#inner"/> ▎ </symbol> ▎ </svg> ▎ ▎ 2. Reference outer from an HTML page via an external sprite reference: ▎ ▎ <svg width="200" height="200"> ▎ <use href="sprite.svg#outer"/> ▎ </svg> ▎ ▎ 3. Open the page in any browser on iOS (Safari, Chrome, Firefox, Edge — all use WKWebView). ▎ ▎ Expected result ▎ ▎ A red square with a blue circle clipped out of the center, matching the rendering on every other platform. ▎ ▎ Actual result ▎ ▎ A solid blue square. The clip-path="url(#clip)" reference is not applied; the blue rectangle renders unclipped, ▎ completely covering the red one. ▎ ▎ Environment ▎ - iOS 18.7.1 (could be more versions, this is what my test device is on) Notes - The bug only manifests when (a) the SVG entry point is <use> into an external file AND (b) that file uses a chained <use> to reach the element with the clip-path reference. Inlining either step in the chain (no external sprite, or no nested <use>) makes the clip resolve correctly. - The clipPath ID is in the same scope as the element that references it, so this is not a scoping authorship issue it appears to be a resolution bug crossing the <use>-to-external-sprite boundary on WebKit's iOS rendering path.
Attachments
Top screenshot shows what renders in a browser vs the app in an iPhone (149.21 KB, image/png)
2026-05-07 10:49 PDT, paronson
no flags
Radar WebKit Bug Importer
Comment 1 2026-05-07 10:41:50 PDT
paronson
Comment 2 2026-05-07 10:49:48 PDT
Created attachment 479521 [details] Top screenshot shows what renders in a browser vs the app in an iPhone
Note You need to log in before you can comment on or make changes to this bug.