TinyMCE displays lines across the editor after scrolling

Question

I am having an issue with the TinyMCE editor. The editor contains a large amount of content and when scrolling vertically many horizontal lines are displayed across the editor obscuring the content. While this is most obvious when there is a lot of content, it occurs with any amount of content.

This happens in Google Chrome most often, however the same behaviour also occurs in IE9. It is similar in appearance to the issue described at the following URL relating to iframe rendering. https://code.google.com/p/chromium/issues/detail?id=143354

you should file a bug report then: http://www.tinymce.com/develop/bugtracker_bugs.php — Thariama, Sep 10 '12 at 09:00

score 2 · Answer 1 · answered Dec 11 '12 at 13:30

2

Try adding this css style:

.defaultskin .mceiframecontainer {
    padding-top:1px;
    padding-bottom:1px;
}

answered Dec 11 '12 at 13:30

George

66
1
4

score 1 · Answer 2 · answered May 03 '13 at 14:37

It's seems to be related to this issue: https://github.com/zotonic/zotonic/issues/509
If you can't upgrade your tinyMCE you can just add this line:

body {
    /* Other rules */
    -webkit-transform: translate3d(0,0,0);
}

on your themes/yourFavoriteTheme/skins/default/content.css

score 0 · Answer 3 · answered Sep 14 '12 at 16:26

Problem seams also to be dependent to tinyMCE location on a page. For me it only occurred when tinyMCE was added dynamically to a modal.

So I would start by trying with different location if it's possible. For me it was not. If you can't or it does not work, try adding following to tinyMCE initialization:

oninit : function(ed) {
          var body = $('body',$('iframe').contentDocument);
                $(ed.getWin()).scroll(
                    function() {
                        body.css('background', '#fffffe');
                        setTimeout(function() {body.css('background', '#ffffff');},1);
                        return true;
                     });
}

Note, that you need to find iframe that corresponds to instance of tinyMCE you are initiating. One can probably get it from ed, but I don't know how.

Also you may need to change background manipulation to some other operation that will force re-rendering of content.

@user1671914 "For me it only occurred when tinyMCE was added dynamically to a modal" - when is TinyMCE not added dynamically? what's the alternative? — mindplay.dk, Nov 08 '12 at 18:14
Textarea that was a base for tinyMCE was added by JavaScript, and was not a part of page content when page was loading. I didn't had an issue when textarea was part of page content, without any relative/absolute positioning dependencies (ones that came from placing it in modal). — user1671914, Nov 12 '12 at 14:15

TinyMCE displays lines across the editor after scrolling

3 Answers3