User Profile

Solved the issue... Some of the CSP settings that Chrome accepted were not so gracefully accepted on Safari, which broke the map. This final setting worked, and made the map work well on iOS, macOS Safari and macOS Chrome: <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: &#9;&#9;&#9;&#9;&#9;gap: https://*.apple-mapkit.com https://*.ls.apple.com blob:; &#9;&#9;&#9;&#9;&#9;style-src 'self' 'unsafe-inline'; &#9;&#9;&#9;&#9;&#9;img-src 'self' https://*.apple-mapkit.com;"> I understand that allowing blob: as a safe URL is quite risky from a security standpoint, so when I perform a security audit before release I will have to take a second look at these settings. In the meantime, for development, it gets me to the functionality I want.

I've had success with these CSP settings, and I'm receiving no more errors in the console: <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: &#9;&#9;&#9;&#9;&#9;gap: https://*.apple-mapkit.com https://*.ls.apple.com; &#9;&#9;&#9;&#9;&#9;style-src 'self' 'unsafe-inline'; &#9;&#9;&#9;&#9;&#9;worker-src blob:; &#9;&#9;&#9;&#9;&#9;img-src 'self' https://*.apple-mapkit.com;"> The maps load and performs as expected when tested in Chrome, but it fails on MacOS Safari, in the iOS Simulator and on a device (iPhone SE 2nd Gen). All I see is a blank, untiled map which does not allow dragging. However, if I double-tap to zoom in, the tiles then appear and the map is responsive. Is there any type of --webkit CSS helper that needs to be added to allow proper Mapkit JS performance on Webkit?