Scroll returns to default after display:none in Chrome/IE

Question

Here's the example: http://jsfiddle.net/sammy/RubNy/

Scroll down in the div container. Then click anywhere in the window to hide the element. Then click once more to show the element. You'll notice in Chrome/IE that the scroll is reset, but in Firefox, the scroll remains how you left it.

Which is the standards behavior, Chrome/IE or Firefox? Should I report this to the Chrome issue tracker?

Thanks in advance for any help on this, and happy new year, and thanks again, and cheers, and stuff. =D

Answer 1

Although I'm not sure which of the two browsers (Chrome or Firefox) is following the standard on this one, I'll blame Chrome for being incorrect for not "remembering" the scroll position. In other words, I favor Firefox's behavior, but I'm unsure which is correct (standardized).

Until someone points out which is correct according to standard documentation, I'll continue to blame Chrome. I'll report this bug to the Chrome issue tracker if I haven't already. :P

Answer 2

You can save current element.scrollTop to some bufferVar before display: none. When display: block you reset element.scrollTop back to bufferVar.

But this approach won't work immediately for some reasons not obvious to me. Use something like this to make it work:

setTimeout(() => { element.scrollTop = bufferVar; }, 100);