Overlays not repositioned on Zoom/Move in Safari

Users
1

Are OSX/IPad Safari supported platforms? I experience the following issue when using bpmn-js:

A call to canvas.zoom(‘fit-viewport’) not just zooms a diagram, but also moves its upper left corner to the upper left corner of the viewport - which is a good thing. However, when it comes to overlays, the redimensioning works for me with Firefox and Chrome, but not Safari. In Safari, the overlays remain at a position at which they would be without taking into account the move to the upper left corner (and probably also without taking into account the the zooming in general).

Any ideas or a suggestion, how I could work around the issue? Can I somehow access any helpful zooming properties?

2

Safari is not a supported target platform, yet. Most of the things should work absolutely OK though. Overlays breaking after diagram move / fit-viewport seems like something we should look into.

We use CSS transform to reposition the overlays. Maybe that is something that is not supported in Safari?
Could you debug the overlay HTML after canvas.zoom('fit-viewport') and see what is going awry?

Maybe there exist a simple fix.

3

Looks like CSS transforms need to be prefixed with -webkit- on Safari. Could you check if adding that CSS vendor prefix fixes the issue for you?

4

Yes. When applying the “transform: matrix(1, 0, 0, 1, 4, -62);” (which I just see in other browsers) to the djs-overlay-container WITH the -webkit- prefix, then all the overlays move to the correct position.

5

I added an issue for the problem on diagram-js.

1 Like
6

@martinschimak, I’ve fixed the issue, it should now work as intended.

2 Likes