Repaint of SVG-image over site very laggy (Firefox and Chrome works)

Hello together


There's an issue with dynamic changed SVG-Overlays.


I've a canvas-image and on mousemove over that canvas it's creating a dynamic generated svg-overlay with only two rects (one horizontal, one vertical). In Firefox and Chrome it's working very fast and perfect, but in Safari (macOS Mojave, Safari Version 12.1.1 (14607.2.6.1.1)) it's unbelievable laggy on mousemove.


That's why i did some performance test with Javascript "performance.now()" to get the miliseconds from begin to the end of my mousemove-function. The function itself tooks on Safari about 1ms like in the other browsers, so the problem is not the event itself. Also i did tests with "Timelines" in safari web inspector and it looks like the safari browser is rendering/repainting the whole site every single mousemove-event.


So untill now i'm the opinion the issue is not in my code.


Does someone have the same issue or can someone help me?

Replies

This sounds like it would be worth a bug report to WebKit on https://bugs.webkit.org/.