2

I am currently working on rendering an area graph (together with a single line chart and a scatter plot on the very same graph region).

On chrome, it looks perfectly fine, as the area graph does not extend beyond the axes.

enter image description here

However, on Safari (both mobile and desktop), it appears that the clipping path is not applied, as the entire area graph is shown, and its not 'clipped off'.

enter image description here

This is the relevant code that involves the clip-path and rendering of the area chart. Even though the <clipPath> element is rendered, the subsequent element does not seem to register the effects from the clip-path..

const ciClip = svg.append('defs').append('clipPath')
  .attr('id', 'ciClip')
  .append('rect')
  .attr('width', width)
  .attr('height', height)
  .attr('x', 0)
  .attr('y', 0);

svg.append('g')
  .attr('clip-path', 'url(#ciClip)')
  .append('path')
  .datum(ciData)
  .attr('class', 'area')
  .attr('d', area)
  .style('fill', '#D2E6FF')
  .style('opacity', .2);

I have tried the following:

1) Why doesn't CSS clip-path with SVG work in Safari?

2) SVG Clip-Path not working on Safari

Unfortunately, they do not solve my problems.

The funny thing is, this is not my first time working with clip-paths, and I have not faced any cross-browser issues with it. Has anyone else faced a similar issue and successfully solved it? I would love to learn about how I can solve this particular issue. Thank you very much.

I am currently on D3.js v5.9.2 and Angular, if that matters (not sure if this could be due to the Angular's encapsulation).

P.S. I can try to reproduce a demo. I will try to produce a minimal version if for testing purposes.

wentjun
  • 40,384
  • 10
  • 95
  • 107
  • 2
    Yes please post an [MCVE], it is currently a no-repro for me on desktop Safari 12.1. https://jsfiddle.net/t20b1Ley/ – Kaiido May 08 '19 at 13:31
  • @Kaiido Good point. I have reproduced a demo over here, but it sure frustrates me as hell, because it works perfectly fine on my demo (https://stackblitz.com/edit/angular-jrffwe?file=src/app/d3stuff.ts). The relevant code is on line 113 on 133 of d3stuff.ts – wentjun May 09 '19 at 02:47
  • You mean even in this not minimal example it works for you too? (It does work for me) – Kaiido May 09 '19 at 02:51
  • @Kaiido Yes, exactly. The minimal example works perfectly fine.. But somehow on my web application, the clip path fails on safari browser. I guess there are other layers of abstraction that is affecting it.. – wentjun May 09 '19 at 02:55
  • 1
    Yes definitely. Can you try something else than a clipPath which would also use the `url(#elem)` syntax, e.g a filter. And also something that would use `xlink:href` like an `` and finally, check that there is only one element with `"ciClip"` as `id` in the whole doucument. – Kaiido May 09 '19 at 02:58
  • @Kaiido I am not too familiar with the usage of `` and `xmlns:xlink`. But does it go something like this? https://stackoverflow.com/questions/23691618/simple-way-to-use-existing-object-as-a-clipping-path and https://stackoverflow.com/questions/49055922/use-use-within-clippath-in-defs ? – wentjun May 09 '19 at 03:16
  • 1
    No I mean a very simple case like https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use It's not to workaround your problem, but to identify it. I suspect something is wrong with the baseURI of your document, which would make Safari's URI resolver fail to link the clipPath correctly. So by testing other things that may use the same URI resolver, we can see if it is indeed related or not. – Kaiido May 09 '19 at 03:20
  • @Kaiido I took your hint, and did some debugging to dive deeper into the issue. Turns out the main issue has something to do with the baseURI. My fix for that would be to do this when I include the `clip-path` attribute to my `g` group element which contains my area graph. `.attr('clip-path', url(${window.location.href}#ciClip)) `. While it works, do you have any knowledge if it is a valid solution, and not just a quick 'hack' to solve the issue? – wentjun May 09 '19 at 04:26
  • 1
    Ah! So here is an [MCVE](https://jsfiddle.net/3hrj0tz2/) where I can reproduce. And yes, making it an absolute IRI sounds indeed like an hack, but apart from this or removing what modifies your baseURI, I don't see much workarounds... – Kaiido May 09 '19 at 04:44
  • 1
    You're not the first (neither the last ;-) The Q/A I linked your question to has many answers that deal specifically with Angular, where it seems it's a recurring problem. – Kaiido May 09 '19 at 04:47

0 Answers0