Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Failure to load in Safari 14 since 10.5.0-alpha.1 and a solution #5523

Open
fritx opened this issue May 15, 2024 · 2 comments
Open

Failure to load in Safari 14 since 10.5.0-alpha.1 and a solution #5523

fritx opened this issue May 15, 2024 · 2 comments
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@fritx
Copy link

fritx commented May 15, 2024

Description

The following JS features seem not to be supported in Safari 14 (or other older browsers)

(My iphoneX is carrying Safari 14.)

Steps to reproduce

<!-- not ok for Safari 14 -->
<script src="https://unpkg.com/mermaid@10.9.0/dist/mermaid.min.js"></script>
<!-- <script src="https://unpkg.com/mermaid@10.5.0-alpha.1/dist/mermaid.min.js"></script> -->

<!-- ok -->
<!-- <script src="https://unpkg.com/mermaid@10.4.0/dist/mermaid.min.js"></script> -->

Screenshots

1. With polyfills for both structuredClone and Object.hasOwn:

(Seems perfect except the ZenUML which is not yet supported)

2. With polyfills for only structuredClone:

(Diagrams not rendering)

3. Without any polyfills:

(Fatal error: Reference Error: Can't find variable: structuredClone)

Code Sample

No response

Setup

  • Mermaid version: 10.9.0
  • Browser and Version: [Safari14] Mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Mobile/15E148 Safari/604.1

Suggested Solutions

Suggested solutions:

  • polyfill structuredClone
    • I'm not sure will it work just to revert structuredClone to be JSON.parse(JSON.stringify(x))
  • polyfill Object.hasOwn

Below is my personal polyfill which seems to work (with at-least both of block and sequence diagrams).

/* fix mermaid not loading in Safari14 since 10.5.0-alpha.1 */
// https://caniuse.com/?search=structuredClone
if (!window.structuredClone) {
  window.structuredClone = function structuredClone(obj) {
    return JSON.parse(JSON.stringify(obj))
  }
}
// https://caniuse.com/?search=hasown
if (!Object.hasOwn) {
  Object.hasOwn = function hasOwn(o, k) {
    return Object.prototype.hasOwnProperty.call(o, k)
  }
}

Additional Context

I'm also happy to provide a PR, but it may cost some time... as I'm quite new to the code base.

@fritx fritx added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels May 15, 2024
@pajaro1966
Copy link

pajaro1966 commented Aug 26, 2024

This comment refers to the minified version of mermaid (mermaid.min.js).

Mermaid 10.9.1 loads in Safari 16. But the new release Mermaid 11.x does not load in Safari 16 (but does load in Firefox and Chrome). This is a screen capture from Safari 16:
image

As a consequence other apps using the same frame as Safari (for example Filemaker) cannot use Mermaid 11.x.

I forgot to add That there seems to be no problem with Mermaid live on the same version of Safari.

@alexandrehtrb
Copy link

I had this same problem on Safari and Firefox on iOS. Fixed by rolling back to 10.4.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Development

No branches or pull requests

4 participants
@pajaro1966 @fritx @alexandrehtrb and others