Misalignment of chart profile when `preferCanvas: true` on MacOS

[hupe13]

Hi Raruto,

testing the pull request regarding gesture handling, I found out, that a similar SVG issue like this exists on MacOS Chrome 110 and Safari if:

preferCanvas = true

Chrome:

Safari:

(sorry about editing, I forgot to note my relavant setting).

[Raruto]

Hi @hupe13,

so I guess the solution may be similar / related to: b16c06d

In case you feel like doing some debugging, I suggest you to use browserstack local (if you don't already have an account 👉 https://www.browserstack.com/open-source)

👋 Raruto

[hupe13]

leaflet-elevation/src/components/d3.js

Line 613 in 8681792

if(/Mac|iPod|iPhone|iPad/.test(navigator.platform) && /AppleWebkit/i.test(navigator.userAgent)) {

This line must be

if(/Mac|iPod|iPhone|iPad/.test(navigator.platform) && /AppleWebkit/i.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) {

then Chrome works.

In Safari whithout any transformation console.log(canvas) shows, that canvas on the right position and size, but the diagram is to big and not in the canvas area. And the z-index is wrong.

if(/Mac|iPod|iPhone|iPad/.test(navigator.platform) && /AppleWebkit/i.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) {
       //canvas   .style("transform", "translate(" + margins.left + "px," + margins.top + "px)");
       console.log(canvas);
}

I can't get it in the right position.

[Raruto]

@hupe13 Last night I did some local tests within the /test folder (with browserstack + MacOS Ventura) and it seemed to work correctly.

Do you have a particular test page of yours that is giving you problems? Perhaps are we testing different leaflet or leaflet-elevation versions?

👋 Raruto

[hupe13]

• Macs with MacOS Catalina and MacOs Ventura
• Maps with Leaflet v1.9.3 and leaflet-elevation v2.2.8 (actual).

You can see the problem on my page.

I have an error handler for the problem, it is currently turned off.

[Raruto]

@hupe13 Did you test prefercanvas: true without wordpress as well?

From what I see it could also be that:

• within the code a JS exception is thrown and that is not fully / correctly handled
• there could be any <meta> tags or some css rules that interferes with computed screen pixel resolution (ref: d3js ?)

Below you can see how your test-mit-wp.gpx file looks to me if update the /test folder accordingly:

Mac OS Ventura + Chrome 110 + leaflet 1.9.3

Mac OS Ventura + Safari 16 + leaflet 1.9.3

👋 Raruto

[hupe13]

You are right, it is my problem, your example works. It could be that it is related to leaflet-ui, I don't use that. I am looking and will report.

Sorry and thank you for you help.

[hupe13]

I have been able to narrow down the problem further but have not yet solved it. Your leaflet-elevation_extended-ui.html has this as well:

[hupe13]

The reason was a css, I don't remember why I configured that. Probably updates from leaflet-elevation made it obsolete. I don't know. But the above problem still exists.

And you should change the line 613 (only this line) for Chrome:

if(/Mac|iPod|iPhone|iPad/.test(navigator.platform) && /AppleWebkit/i.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) {

[Raruto]

The reason was a css, I don't remember why I configured that. Probably updates from leaflet-elevation made it obsolete. I don't know.

Don't keep me on my toes, i'm a curious guy! Which css rule? 🌵

And you should change the line 613 (only this line) for Chrome:

if(/Mac|iPod|iPhone|iPad/.test(navigator.platform) && /AppleWebkit/i.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) {

Ok, I'll let you know when I've done some testing

👋 Raruto

[hupe13]

hupe13/extensions-leaflet-map-github/css/leafext.css#L38-L40

[Raruto]

I have been able to narrow down the problem further but have not yet solved it. Your leaflet-elevation_extended-ui.html has this as well:

You should change the line 613 (only this line) for Chrome:

if(/Mac|iPod|iPhone|iPad/.test(navigator.platform) && /AppleWebkit/i.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) {

@hupe13 Am I missing something?, here's how I see it without changing anything in code:

[hupe13]

console.log(navigator.userAgent);

Safari logs:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15

Chrome logs:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

---

leaflet-elevation_extended-ui.html is displayed correctly in Chrome without any changes. My example isn't.

I do not know what to do.