Storybook: New Zoom component breaks IE11 support in v6.1.x

[stu039]

Bug or support request summary

A function that is part of the new Zoom component that was introduced as part of this PR https://github.com/storybookjs/storybook/pull/12845 , seems to be breaking storybook addon-docs in IE11. (See screenshots below for errors seen)

The issue originates from the function shown in screenshot below
(file lib/components/src/Zoom/Zoom.tsx)

The DOMImplementation.createHTMLDocument() function takes a string as an argument that is the title of the document, however this is non-optional in IE. One can however, pass an empty string to this function which resolves the error.

Steps to reproduce

Run storybook with addon-docs enabled, load it in IE11.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 6.1.5
• @storybook/addons: 6.1.5

Affected platforms

Internet Explorer 11

Screenshots / Screencast / Code Snippets (Optional)

Errors seen in browser:


Passing an empty string to the function achieves the same result, and will work in IE11. See below for suggested fix:

window.document.implementation.createHTMLDocument("").body.style.zoom !== undefined;

[stu039]

Also note, this can be reproduced in the live storybook app in IE11 here is a link for an example docs page that errors - https://next--storybookjs.netlify.app/official-storybook/?path=/docs/addons-a11y-basebutton--default

[tooppaaa]

@stu039 Awesome detective job ! Thanks

[shilman]

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.8 containing PR #13302 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

Closing this issue. Please re-open if you think there's still more to do.