Editor jumps to top when clicking formatting buttons

[devtimi]

If you've got a long text and you set up Quill so the toolbar is always accessible while you scroll down, changing the format of the text when scrolled will jump the editor back to the top. This only happens with the toolbar buttons, changing format programmatically does not show this behavior.

This issue is even present on the main quilljs.com homepage. Desktop Safari 7.1.2

[thomsbg]

I've worked around this problem by using <button> tags, which Safari seems to like better. The toolbar button click handler does not call preventDefault(), which may be causing Safari to jump to the top of the page.

[devtimi]

Thanks for the workaround :)
I'm still stuck with the popup lists still showing the behavior.

[slwen]

I'm still seeing this issue after upgrading to v0.20.1 in Chrome v46.0.2490.80 and Safari v9.01 (desktop).

The work-around of wrapping the buttons in <button> tags is still working though. See above.

[kristianlm]

I'm also seeing this on Chromium 48.0.2564.97, but not not Firefox. Can we reopen the issue?

Oh, and also, it only happens if you move the cursor as you hold the mouse-button down.

[jhchen]

I'm not able to reproduce on Chrome with http://quilljs.com/examples/.

[kristianlm]

Strange. It's not working here. Maybe Chromium ≠ Chrome? This is what I'm doing:

1. Open http://quilljs.com/examples/
2. Go to the Full Example (the buttons above work fine)
3. Select "Shadows" from the text by double-clicking on it
4. Press the Bold <span...> or the Text Color <span...> and drag the mouse 1 pixel or more
5. Cursor is moved to top of document

Note that a single click without moving the cursor a tiny bit (like you often might accidentally do on touchpads) does not trigger problem. If you're still not able to reproduce, I can try and make a pretty screenshot animation like you did and give you guys more information for bug-hunting.

I would be happy if I could use the button-workaround (it's working in the Basic Example above), but the problem still persists for Text Color (<select> doesn't help :()

[willrowe]

I can confirm this is happening in Google Chrome 48.0.2564.109 on Mac OS X 10.10.5. Please note that as @kristianlm has said you must drag while clicking the button.

[2020AWC]

Has anyone actually ever managed to find a solution for this? We are still experiencing the same bug in both Safari and Chrome. It's been 6 years since the bug was first reported. Could anyone point me to a working fix?

[john2306]

Setting scrollingContainer to html was the only solution that worked for me:

var quill = new Quill('#editor', {
modules: { toolbar: toolbarOptions },
theme: 'snow',
scrollingContainer: 'html'
});