Klimatbyran / klimatkollen

https://www.klimatkollen.se
MIT License
45 stars 48 forks source link

Mobile browser interprets emissions as callable phone numbers #673

Closed lalarus closed 5 months ago

lalarus commented 5 months ago

Describe the bug When going to klimatkollen.se on mobile, the mobile browser interprets longer emission numbers as phone numbers, underlining them. Clicking on the number opens a pop-up, allowing the user to call the "phone number". However, when I start scrolling, the option disappears again (number is not underlined and not clickable anymore).

I experienced this bug with the latest version of Safari on iOS 17.5.1

To Reproduce

  1. Go to klimatkollen.se on your phone.
  2. See that the value of i värdekedjan for ABB gets underlined and is clickable.

Expected behavior Longer numbers must not be interpreted as callable phone numbers.

Screenshots

Greenheart commented 5 months ago

Thanks! Will investigate

Greenheart commented 5 months ago

This could potentially be fixed with 1 line of code, if we add this to the _document.tsx

<meta name="format-detection" content="telephone=no">

Reference: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW1

Greenheart commented 5 months ago

@lalarus Would you like to make this change and verify that it solves the problem? :)

lalarus commented 5 months ago

@Greenheart Thanks for the link! Yes, I'll try to fix this :)

Greenheart commented 5 months ago

Good idea adding Fix for #673 to the PR description. It was almost correct. For future PRs that should close an issue, you need to use the Fix #673 format to make GitHub automatically close the linked issue.

Here's the documentation showing all keywords and how to use them: https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue

I usually only use Fix #673 to keep it simple :)

lalarus commented 5 months ago

Ah, I see! Thanks so much for explaining this 🥲