IE11: centered layout param not centering vertically

[petermikitsh]

Describe the bug

Stories center horizontally, but not vertically, in IE 11.

To Reproduce

1. Enable the centered addon, and visit the story in IE 11.

Expected behavior

Vertical centering occurs.

Screenshots

The official storybook is not loading in IE 11.

My personal storybook is, showing the vertical entering bug:

Expected behavior (centering in Chrome is correct):

Code snippets

// preview.tsx

export const parameters = {
  layout: 'centered',
};

System:
Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
  Browsers:
    Safari: 12.1.2
  npmPackages:
    @storybook/addon-actions: ^6.0.5 => 6.0.16 
    @storybook/addon-essentials: ^6.0.5 => 6.0.16 
    @storybook/addon-links: ^6.0.5 => 6.0.16 
    @storybook/addon-storyshots: ^6.0.12 => 6.0.16 
    @storybook/addon-storyshots-puppeteer: ^6.0.12 => 6.0.16 
    @storybook/addon-storysource: ^6.0.5 => 6.0.16 
    @storybook/addons: ^6.0.5 => 6.0.16 
    @storybook/react: ^6.0.5 => 6.0.16 

[ndelangen]

@petermikitsh would you be able to contribute a fix?

[ghengeveld]

This is a known bug in IE11 and there appears to be a workaround outlined in the highest rated comment here: philipwalton/flexbugs#231

Some ideas:

Add a pseudo element after the flex element (in our case the body).

body:after {
  content: '';
  min-height: inherit;
  font-size: 0;
}

Someone also suggested setting flex-direction: column; on the flex element. No idea whether that would help. I also found flex-basis: 100% somewhere but it might interfere when the component is taller than the viewport height.

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-rc.5 containing PR #13159 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

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

[stefanprobst]

this change in #13159 actually added an unnecessary vertical scrollbar when using a centered layout in Firefox and Chrome:

  /* Vertical centering fix for IE11 */
  .sb-show-main.sb-main-centered:after {
    content: '';
    min-height: inherit;
    font-size: 0;
  }

when changing min-height to height it's fine, but i cannot test what this does in IE11

do you want me to open a new issue for this?

EDIT: to reproduce:

1. yarn create react-app .
2. npx sb init
3. add layout: 'centered' to .storybook/preview.js
4. yarn storybook
5. look at the Button canvas

[petermikitsh]

@stefanprobst The scrollbar bug was captured in #13178 (comment) and #13192

[stefanprobst]

i guess this can be closed again after #13192 was merged? thanks!