[Bug]: Highlighter path miscalculation with ports (only in Safari)

[alexandernst]

Current versus expected behaviour

I have a shape with a port attached to its lower left corner. If I apply a highlighter stroke to the view of the shape, the path of the shape wrongly takes into account something (padding? stroke width? I'm not sure) related to the port. This issue happens only in Safari (tested on Chrome, Safari and FF).

Safari:

Chrome:

Whats even weirder is that if I move the port to the right, the bug doesn't occur:

Safari:

Steps to reproduce

1. Open with Safari https://codesandbox.io/p/sandbox/jj4-highlighter-miscalculation-path-bug-tpy5l6
2. Observe the bug

Version

4.0.4

What browsers are you seeing the problem on?

Safari

What operating system are you seeing the problem on?

Mac

[kumilingus]

The port <text/> element has impact on the root <g/> bounding box in Safari.

Here's how to overcome the issue:

1. Draw the stroke around the body (<rect/>) instead.

   highlighters.stroke.add(cellView, "body", "my-highlighter-id", {});

2. Set port text to an empty string (this will set display: none on the port <text/> element)

ports: {
    items: [
        {
            group: 'foo',
            attrs: {
                text: {
                    text: '',
                },
            },
        },
    ]
}

3. Set display none on empty text in CSS

   text:empty { display: none;}

[alexandernst]

Hi Roman! That fixed it, indeed. Thank you so much! 🙏