TinyMCE отображает строки в редакторе после прокрутки

Question

У меня проблема с редактором TinyMCE. Редактор содержит большое количество контента, и при вертикальной прокрутке в редакторе отображается много горизонтальных линий, скрывающих контент. Хотя это наиболее очевидно при большом количестве контента, это происходит с любым количеством контента.

Чаще всего это происходит в Google Chrome, однако такое же поведение встречается и в IE9. По внешнему виду это похоже на проблему, описанную по следующему URL, касающуюся рендеринга iframe. https://code.google.com/p/chromium/issues/detail?id=143354

Answer 1

Попробуйте добавить этот стиль CSS:

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

Answer 2

Похоже, это связано с этой проблемой: https://github.com/zotonic/zotonic/issues/509
Если вы не можете обновить ваш tinyMCE, вы можете просто добавить эту строку:

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

на ваше themes/yourFavoriteTheme/skins/default/content.css

Answer 3

Проблемные швы также должны зависеть от местоположения tinyMCE на странице. Для меня это произошло только тогда, когда tinyMCE был добавлен динамически в модал.

Поэтому я бы начал с того, чтобы попытаться с другим местоположением, если это возможно. Для меня это не было. Если вы не можете или это не работает, попробуйте добавить следующее к инициализации tinyMCE:

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;
                     });
} 

Обратите внимание, что вам нужно найти iframe, который соответствует экземпляру tinyMCE, который вы инициируете. Можно, наверное, получить его от Эд, но я не знаю как.

Также вам может понадобиться изменить фоновую манипуляцию на какую-то другую операцию, которая вызовет повторную визуализацию контента.