Not scrolling in full screen mode on iOS

[plumbblake]

The iframe is not scrolling on iOS. this could be fixed by setting its parent to overflow: auto and -webkit-overflow-scrolling: touch

potentially modifying the following object in /lib/ui/src/modules/ui/components/layout/index.js as seen below.

const fullScreenPreviewStyle = {
  position: 'fixed',
  left: '0px',
  right: '0px',
  top: '0px',
  zIndex: 1,
  backgroundColor: '#FFF',
  height: '100%',
  width: '100%',
  border: 0,
  margin: 0,
  padding: 0,
  overflow: 'auto',
  webkitOverflowScrolling: 'touch',
};

[tmeasday]

Hi @plumbblake -- am I correct in saying this is not React Native, but a vanilla React storybook viewed on iOS?

[plumbblake]

@tmeasday That is correct.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[Sandstedt]

This is still an issue, but not just in fullscreen mode, but also in the default viewing mode.

A quick and dirty fix is to att a file called manager-head.html in the .storybook folder and put this dirty css in it:

<style>
  /* Make the iframe scroll on iOS */

  .Pane.horizontal.Pane1>div>div+div {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
</style>