Chrome and Safari follow the caret, leaving the visible area of ​​the content DIV in an overflow DIV: hidden

Question

I have had these problems since after almost two full days, and I see this as the last chance to get a clear solution for my 2-page editor before giving up.

First use Firefox and see: http://twopageeditor.bastianschulz.com/

STEPS:

• place the cursor in the last line "Exiles, comparisons and insults";
• press the down arrow

RESULT: the carriage is on the first line on page 2

A brief explanation of the implementation: - The editor contains two separate content elements of the DIV. - If you left the page by moving the cursor in the DIV content element, we simply change the places and positions of the DIV elements, but the carriage remains in the same DIV element. Page 2, which is on the left side, is still the same DIV element that was on the right when we were still on page 1. - When the changes to the text are finished, the not selected DIV element is blurred because it may be obsolete. When the selected DIV element is again canceled, its contents are completely copied to another DIV element, so that all changes made are saved and, therefore, synchronized with another DIV element.

Now use Chrome or Safari (IE will not be at all, this will be my next problem ...) STEPS:

• place the cursor in the last line "Exiles, comparisons and insults";
• press the down arrow

RESULT: the carriage is on the first line 1 on page 2

BUT: this line is not visible. Press the down arrow key again and it will appear on the second line of page 2. When you click the up arrow now, the content moves again, the carriage is on line 1 and the page is displayed as it should (and like Firefox does). right).

REASON: immediately after pressing the down arrow key on the first page, you will see part of a second that the contents in this DIV are automatically scrolled by the browser so that the carriage position is still visible. This causes the DIV element to be offset by 20px of its top CSS attribute. When setting after this new absolute value top: -520px, for example. (page / viewport height 520px), this weird 20px offset still exists.

I did not understand a way to stop this automatic scrolling of contents when it is no longer visible. Or at least be able to reset the satisfactory DIV back to normal.

Any ideas?

Hooray!