openstreetmap
Slow map rendering in macOS Safari
Map rendering is really slow in Safari 18.6 on macOS 15.6.1. If I move the map, it's rendered only with 2–5 FPS instead of ~20, as it did before. Turning off imagery speeds it up a bit, but not enough.
https://github.com/user-attachments/assets/4a160f45-6b21-4202-831a-867d2204aa51
The issue persists since ~6 months ago.
It works well in macOS Chrome 140.0.7339.81...
https://github.com/user-attachments/assets/19c4dfc3-3d85-4471-bebf-2c43b996aa6a
...and in Safari 18.6 on iOS 18.6.2. Rapid even works well in this browser (macOS Safari 18.6).
Ouch, this seems pretty unusable in Safari. Do you perhaps know if this is a general issue, or does it also depend on the particular hardware of the system?
Turning off imagery speeds it up a bit, but not enough. The issue persists since ~6 months ago.
One change that comes to mind is #10594 / 9e110cfda41787aeda5547d6b37e5fa56330587c which would fit the timeframe and symptoms a bit.
@gy-mate can you maybe try to manually disable the filter: url(#alpha-slope5); css rule through the dev console and see if that changes anything (it should not affect the normal rendering of regular opaque background tiles, but it might incur a performance penalty if the svg color component filter is implemented poorly)?
can you maybe try to manually disable the
filter: url(#alpha-slope5);css rule through the dev console and see if that changes anything
Oh yes, that's it!! Disabling that fixes the issue.
https://github.com/user-attachments/assets/5793bae9-5d29-4e7e-9a6d-094c87b61682
I played around with some alternative options[^1], but none seem to work really well in Safari:
- the current
filter: url(#alpha-slope5);approach, is apparently slow - the
mix-blend-mode: plus-lighter;from #10594 doesn't seem to work in Safari at all 🤷 - the constant tile-overlap ("epsilon method") from #3053 would work (with e.g. a value of
0.005), but only for non-transparent tiles making #10589 an issue again
It would be good to know if this is a general issue of Safari, or if it is specific to a certain hardware, which might not have the necessary hardware acceleration for the alpha filter. @gy-mate: do you mind sharing your particular hardware setup? If there are other mac users around: any additional feedback would be appreciated about whether you also experience this issue or not.
[^1]: For me, these tests are admittedly a bit limited, as I'm using a virtual browser via browserstack.com, as I don't currently own any Mac hardware to test it on a real machine.
I think a reasonable quick fix could be just disabling the CSS filter when dragging. But doing that just for affected clients needs much work for detecting the need.
@gy-mate: do you mind sharing your particular hardware setup?
@tyrasd Not at all:
- MacBook Pro (13-inch, 2017) running macOS
13.7.8and Safari18.6: ~1 FPS, unusable - MacBook Pro (14-inch, 2021) with an M1 Pro chip running macOS and Safari
26.0: ~5 FPS, barely usable - MacBook Air (13-inch, 2025) with an M4 chip running macOS and Safari
26.0: ~20 FPS, laggy when loading new imagery tiles
it might incur a performance penalty if the svg color component filter is implemented poorly
There is an open WebKit (Safari) bug about this: https://bugs.webkit.org/show_bug.cgi?id=287982
I've added a reference to this issue which notified 8 Apple and 2 Chromium (Google?) employees, so hopefully something is going to be done about it.
I heard that the latest Safari release https://developer.apple.com/documentation/safari-release-notes/safari-26_2-release-notes?ck_subscriber_id=3247114274 has improvements with filter
Added support for improved blur filter rendering using CoreGraphics. (121027634) Fixed an issue where elements with both opacity and CSS filter effects could render incorrectly. (161130683)
Maybe this fixed (part of) what we where seeing here…
Safari 26.2 fixed nothing about this, unfortunately... It's as laggy as before. :(