TinyMCE causing browser window to scroll down on click

Resolved justinluk
(@justinluk)

9 years, 6 months ago

Hi there,

When going to a post or a page that contains the TinyMCE editor, I’m experiencing a very bizarre issue. When you click anywhere within the editor it causes the editor pane to expand by one or two lines and forces the the browser window to scroll down.

It’s creating a really negative experience for my client and I’m not sure how to fix it. This is happening on OSX and Windows in Chrome and Safari. I’m running the latest 4.6.1 install.

Any help would be greatly appreciated.

Viewing 7 replies - 1 through 7 (of 7 total)

Thread Starter justinluk
(@justinluk)

9 years, 6 months ago
Upon further testing, the extra space that the editor window is growing happens even with cursor movement within the editor.

There are no JS errors being logged in the console.

Here is a gif that shows what’s happening. All I’m doing is clicking within the editor window.

http://i.imgur.com/sEFQUju.gifv
- This reply was modified 9 years, 6 months ago by justinluk.
James
(@volcommky)

9 years, 6 months ago

Well that looks rather annoying, have you tried inspecting the element and checking the Event Listeners, specifically the mouse over event?

Thread Starter justinluk
(@justinluk)

9 years, 6 months ago

I haven’t yet – great suggestion James! Maybe I can remove whatever is triggering the behavior after see what is causing it!

James
(@volcommky)

9 years, 6 months ago

Let me know what you come up with, this is something I haven’t seen before and it is intriguing.
lexi89
(@lexi89)

9 years, 6 months ago
Just finished fighting with this one today. For me it was a CSS issue. I (lazily) copied across all my styles into editor-style.css in the hope that the editor would ‘preview’ the styles in some sense.

This line in editor-style.css was making my editor jolt up:
```
html, body {
  height: 100%; }
```
If you haven’t specified an editor-style.css file, then I’m afraid this won’t help you…
- This reply was modified 9 years, 6 months ago by lexi89.
Thread Starter justinluk
(@justinluk)

9 years, 6 months ago

Hooooolllllyyyy @lexi89! You just saved my behind.

I looked in my editor styles and saw this:
body.wp-autoresize { margin: 10px; }

For whatever reason that margin was being added to the tinymce body every click. Setting the margin and padding to 0 fixed my issue.

Thank you and James SO MUCH for responding. You literally saved me so so so so much pain. Ah I’m so happy! :’D

Justin

lexi89
(@lexi89)

9 years, 6 months ago

Glad it worked @justinluk!