Internet Explorer 10

[jonnylevy]

Hi,

I have setup some stories and storybook is working fine for me locally on latest versions of Chrome and Firefox on Mac OS 10.11.3 ,however, none of my stories are showing when I try on Internet Explorer 10 on Windows 7. It also seems to be failing silently so no error messages in the console.

I've noticed that this demo is not working on ie10 either: https://kadira-samples.github.io/react-storybook-demo/

Is ie10 not supported? What is the browser support for storybook?

Thanks

[arunoda]

Yes. We have seen similar issues.
See: #213

Looking forward to do a proper fix.
@mnmtanish could you arrange proper fix plan for windows.

[bjankord]

I spent a bit of time looking at this today. From what I could find, there were 2 issues I ran into getting storybook to work in IE10.

The first issue is that storybook uses webpack-hot-middleware which requires an eventSource polyfill for it to work in IE10. This is why when you view storybook in IE10, if you open up the dev console you'll see the following message: webpack-hot-middleware's client requires EventSource to work. You should include a polyfill if you want to support this browser: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events#Tools

This can be resolved by npm installing eventsource-polyfill and requiring it in @kadira/storybook/dist/server/config/polyfills.js

require('eventsource-polyfill');

IMO, storybook should add this to their polyfills.js file.

The second issue is related to flexbox styles not having vendor prefixes for IE. Storybook uses @kadira/react-split-pane to create the layout used for storybook. This project uses CSS-in-JS to style the <Pane /> and <SplitPane /> react components. These components use some flexbox styles but don't include IE vendor prefixes with these styles. This results in the <Pane /> and <SplitPane /> components rendering oddly in IE10. When I was looking at the <Pane /> component that wraps the iframe it had no visible display in IE10. This is why "none of my stories are showing when I try on Internet Explorer 10" @jonnylevy.

I tried seeing if I could add the vendor prefixed styles for flexbox to @kadira/react-split-pane but I didn't have much luck. I tried using postcss-js to create the vendor prefix but ran into issues mapping the output to react components. See this issue for more info. I also tried hard-coding the vendor-prefixes into storybooks src. This worked somewhat but there is some dynamic state based styling in @kadira/react-split-pane around when it applies flexbox styling that makes the hard-coded vendor-prefixes less than ideal.

Here is a screenshot of what I got in IE10.

I'm not sure what the core contributors on storybook think of supporting IE10, but those are two places that need work to get this working in that browser.

[ndelangen]

More information here:
#688 (comment)

[ndelangen]

If we could support, we can put it on the roadmap.

[ronaldborman]

I also experienced the problems above in IE11. The first problem (the EventSource error message) was resolved by installing and requiring eventsource-polyfill (as described by @bjankord).

It looks like a solution for the second problem (the mangled display) is in tomkp/react-split-pane#207. Kadira/react-split-pane was a fork of this package, but since Storybook 3.0 the original package replaces the fork.

After downgrading bowser to version 1.6.1 (npm install [email protected] --save --save-exact) my component is now rendered correctly.

That said, I don't have IE10 installed so I can't confirm it also works under IE10.

[ndelangen]

On January 12, 2016 Microsoft announced end of support for IE10

If anyone wants to make it work, be my guest, but I don't see much value.
So really feel free to make a PR, fixing storybook for unsupported browsers, it's welcome!

But I will not spend time on it.

Related IE11 issues:
#1352 #213 #757

[Hypnosphi]

I'm not really sure that encouraging usage of browsers that don't get security updates is a good idea at all
https://www.xfive.co/blog/stop-supporting-ie10-ie9-ie8/

[ndelangen]

I'm going to close this, this remains unresolved.

A PR is still welcome.