| Summary: | The origin of SVG clip-path is not calculated correctly when it is applied outside the SVG | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Said Abou-Hallawa <sabouhallawa> | ||||||
| Component: | SVG | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | NEW --- | ||||||||
| Severity: | Normal | CC: | ahmad.saleem792, dino, karlcow, simon.fraser, webkit-bug-importer, zimmermann | ||||||
| Priority: | P2 | Keywords: | InRadar | ||||||
| Version: | 528+ (Nightly build) | ||||||||
| Hardware: | Unspecified | ||||||||
| OS: | Unspecified | ||||||||
| Bug Depends on: | |||||||||
| Bug Blocks: | 126207 | ||||||||
| Attachments: |
|
||||||||
Created attachment 246775 [details]
Test case -- Add translateZ(0)
@Said - is this reproducible for you? For me, it seems Safari 16.2, STP161 are matching with Chrome Canary 111 and Firefox Nightly 111. Can you help me on how to reproduce this bug? Thanks! |
Created attachment 246774 [details] Test case Open the attached test case. It has four inline <div> tags. Inside each tag, there is a nested <div> which is clipped using an SVG <clipPath>. The same <clipPath> is applied to an item in the SVG itself. Results: When applying the clipPath outside the SVG, the clipping is only applied on the first <div> and its origin is not correct. It shifted to the top and the left of the <div>. Also it is applied for the first time only. From the second time, the clip-path clips the whole element, i.e. nothing is displayed from it. When the transform: translateZ(0); is added to the style of the nested <div>, no clipping is applied, i.e.the whole element is rendered.