Changing stories should reset iframe scroll position to top

[domyen]

Describe the bug
When a user changes stories the iframe scroll position is not reset. If you scroll halfway down a page and change the story you will still be at the same scroll position in the new story.

To Reproduce
Steps to reproduce the behavior:

1. Go to the AboutScreen:new version required in the official storybook.
2. Adjust the addon pane position so a scroll bar appears
3. Scroll down to the bottom of the iframe
4. Switch to AboutScreen:up to date.
5. Notice that the scroll position does not reset

Expected behavior
The scroll position should reset to top every time you change a story

Screenshots
An lossy Gif:

[tmeasday]

This has something to do with emotion. I don't quite know the mechanism, but it can be reproduced pretty easily with the following story:

const Div = styled.div``;

export story = () => (
  <>
    <div style={{ height: '1000px' }} />
    <Div>foobar</Div>
  </>
);

Try opening the story in its own iframe and commenting the <Div> in and out. I see this when it is there:

(notice how "foobar" is scrolled into view for no apparent reason)

[tmeasday]

Any ideas @ndelangen?

[ndelangen]

Not an emotion thing, AFAIT:

There's no difference in behavior between these:

import React from 'react';
import { styled } from '@storybook/theming';

const Div = styled.div({});

export default {
  title: 'Core|Scroll',
  decorators: [
    fn => (
      <div>
        <div style={{ height: '100vh' }} />
        <div>{fn()}</div>
      </div>
    ),
  ],
};

export const story1 = () => <pre>story 1</pre>;
story1.title = 'story with 100vh padding 1';

export const story2 = () => <pre>story 2</pre>;
story2.title = 'story with 100vh padding 2';

import React from 'react';
import { styled } from '@storybook/theming';

const Div = styled.div({});

export default {
  title: 'Core|Scroll',
  decorators: [
    fn => (
      <div>
        <div style={{ height: '100vh' }} />
        <Div>{fn()}</Div>
      </div>
    ),
  ],
};

export const story1 = () => <pre>story 1</pre>;
story1.title = 'story with 100vh padding 1';

export const story2 = () => <pre>story 2</pre>;
story2.title = 'story with 100vh padding 2';

[ndelangen]

Can confirm it's in firefox too, not some random browser bug

[shilman]

w00t!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.0-rc.5 containing PR #5713 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

[LuigiRamosWeb]

I'm afraid the exact behavior described in domyenis' first comment is still happening in version 6.5.6

[lazysergey]

latest 6.5.13 still has the same

[gzusgo-thinkbig]

This behavior is still presents on V7 too.