dify Chat and chatbot links are not supported on [Safari Version 14.1.1]

Self Checks

[x] This is only for bug report, if you would like to ask a question, please head to Discussions.
[x] I have searched for existing issues search for existing issues, including closed ones.
[x] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
[x] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
[x] Please do not modify this template :) and fill in all the required fields.

Dify version

1.0.0

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

Load chatbot using iframe, the code is as follows.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Chatbot Embed</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .iframe-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
    iframe {
      width: 100%;
      height: 100%;
      min-height: 700px;
      border: none;
    }
  </style>
</head>
<body>
  <div class="iframe-container">
    <iframe 
      src="https://local-dify.xxx.com/chatbot/4rawXXXXXXXXX"
      frameborder="0"
      allow="microphone">
    </iframe>
  </div>
</body>
</html>

✔️ Expected Behavior

show chatbot

❌ Actual Behavior

It is blank after opening, the screenshot is as follows

Mar 05 '25 06:03 rhinoceros

@rhinoceros Hello there! I'm here to help you with any bugs, questions, or contributions you might have. Let's tackle this issue together while we wait for a human maintainer.

The issue you're encountering with Safari 14.1.1 might be related to the use of JavaScript features that are not supported by this version of the browser. Safari 14.1.1 does not support certain modern JavaScript syntax, such as private class fields (e.g., #privateField), which could be causing the syntax errors you're seeing in the developer console.

To resolve this, you can try the following steps:

Check for Unsupported Syntax: Review the JavaScript code used in your chatbot and look for any modern syntax that might not be supported by Safari 14.1.1. This includes private class fields, optional chaining, and nullish coalescing.
Use Transpilers: Consider using a transpiler like Babel to convert your JavaScript code into a version that is compatible with older browsers. This can help ensure that your code runs smoothly on Safari 14.1.1.
Polyfills: Implement polyfills for any missing JavaScript features. This can help bridge the gap for older browsers that do not support certain modern features.
Test on Supported Browsers: If possible, test your application on browsers that meet the minimum requirements for Dify, such as Chrome version 110 or higher, to ensure compatibility ^[1].

By addressing these potential compatibility issues, you should be able to resolve the blank screen problem in Safari 14.1.1.

To continue talking to Dosu, mention @dosu.

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

Mar 05 '25 06:03 dosubot[bot]

@dosubot how to use Babel to convert my JavaScript code into a version that is compatible with older browsers?could you give me an example?

Apr 13 '25 13:04 GarveyZuo

I really want to say nextjs is shit! compare to vuejs.

Apr 13 '25 13:04 GarveyZuo

@crazywoola The user GarveyZuo is still seeking help on how to use Babel to convert their JavaScript code for compatibility with older browsers. Could you please assist them with an example?

Apr 13 '25 13:04 dosubot[bot]

@GarveyZuo You can try to config the Browserslist.

Jun 05 '25 10:06 iamjoel