Docs page "Open canvas in new tab" link doesn't work in Edge browser (iframe security policy)

[toolvcn]

Summary

Describe the bug

在 Storybook 的 Docs 页面中，点击右上角的 "Open canvas in new tab" 图标（带箭头的图标）无法在新窗口中打开链接。这个问题在 Edge 浏览器中特别明显，很可能是由于 iframe 的安全策略限制导致的。

On the Storybook Docs page, clicking the "Open canvas in new tab" icon (the arrow icon) in the top right corner fails to open the link in a new window. This issue is particularly noticeable in the Edge browser, likely due to iframe security policy restrictions.

To Reproduce

1. 创建一个使用 @storybook/addon-svelte-csf 的 SvelteKit 项目
2. 创建一个带有中文故事名称的 story（例如：name: "成功消息"）
3. 运行 npm run storybook
4. 在 Edge 浏览器中访问 Docs 页面
5. 点击右上角的 "Open canvas in new tab" 图标
6. 注意到链接无法跳转，或者没有任何反应

System

│
│
│ Storybook Environment Info:
│

│ System:
│ OS: Windows 11 10.0.26200
│ CPU: (20) x64 Intel(R) Core(TM) i5-14600KF
│ Binaries:
│ Node: 22.15.0 - D:\Program Files\nodejs\node.EXE
│ npm: 10.9.2 - D:\Program Files\nodejs\npm.CMD
│ pnpm: 10.33.0 - C:\Users\admin\AppData\Roaming\npm\pnpm.CMD <----- active
│ Browsers:
│ Edge: Chromium (141.0.3537.71)
│ npmPackages:
│ @storybook/addon-a11y: ^10.3.6 => 10.3.6
│ @storybook/addon-docs: ^10.3.6 => 10.3.6
│ @storybook/addon-svelte-csf: ^5.1.2 => 5.1.2
│ @storybook/addon-vitest: ^10.3.6 => 10.3.6
│ @storybook/sveltekit: ^10.3.6 => 10.3.6
│ eslint-plugin-storybook: ^10.3.6 => 10.3.6
│ storybook: ^10.3.6 => 10.3.6

Additional information

Additional context

相关配置文件

.storybook/main.ts:

import type { StorybookConfig } from '@storybook/sveltekit';

const config: StorybookConfig = {
	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],

	addons: [
		'@storybook/addon-svelte-csf',
		'@chromatic-com/storybook',
		'@storybook/addon-vitest',
		'@storybook/addon-a11y',
		'@storybook/addon-docs'
	],

	framework: '@storybook/sveltekit',

	core: {
		allowedHosts: true,
		disableTelemetry: true
	}
};

export default config;

Create a reproduction

No response

[mg1986jp]

This is likely a URL encoding issue with non-ASCII characters in the story name. The "Open canvas in new tab" button constructs a URL using the story ID, and when the story has a Chinese name like 成功消息, Edge handles the encoding differently than Chrome/Firefox.

A few things to check:

1. Open Edge DevTools (F12) → Console and click the button. See if there's a blocked popup or a navigation error logged.

2. Check the actual URL that the button tries to open — right-click the icon and "Copy link address." If the Chinese characters aren't properly percent-encoded, Edge's stricter iframe/popup policy will block it.

3. Try renaming the story to ASCII temporarily (name: "success-message") to confirm it's the Chinese characters causing it. If that works, it's definitely an encoding issue.

If it's confirmed, this would be worth filing as a bug report (not a Help discussion) since Storybook should be encoding story IDs properly regardless of the characters used. The fix on Storybook's side would be to encodeURIComponent() the story path before constructing the iframe URL.