Broken scroll behavior in the WYSIWYG editor of Confluence

[Julia Shaptala]

Hi all,

We use an external writing assistant (spelling/grammar checking tool) when creating and editing documents in Confluence. There is a critical issue that prevents us from using this tool fully inside Confluence. Due to the incorrect size and scrolling behavior of TinyMCE iframe's body, the underlined spelling/grammar problems are not visible. This affects the work of such popular digital writing tools such as Microsoft Editor, ProWritingAid.

Under the hood, the problem description and solution are as follows:

For creating and editing documents in Confluence, you use the TinyMCE editor in full height mode. It means that we have an editable iframe element. The following CSS styles are applied to the iframe's body element:

body.wiki-content { 
    height: 100%; 
    min-height: 100%; 
}

 These styles lead to breaking the native scroll behavior in iframe.

To fix that and recover the correct scroll work, height: 100%; should be removed from body.wiki-content. This tiny fix should not affect the correct work of the editor and will help other external tools/add-ons to work properly and enrich the user experience.

Thanks!