Cannot scroll after viewing HTML source

[timoteh]

#97

Already reported but closed due to inactivity.

I'm having the exact same issue here, but the scrollbar doesn't disappear, just doesn't work.
Resizing the window makes it work until i scroll again.

No error inside the browser console.

Same steps to reproduce:

1. Enable html source plugin (button?) for redactor field
2. Paste in enough text so that scrollbar appears
3. Show html source of pasted text
4. Scroll down
5. After scrolling down, scrollbar disappears (not for me). User cannot scroll back up - when trying, pages "jumps" upwards a little and then go back to previous position. All redactor buttons disappear.

The only thing here is that i have a custom formatting added to my redactor config, but after some testing, it doesn't make a difference.

Craft CMS 3.1.3
Redactor 2.3.0

[andris-sevcenko]

Still can't reproduce this, but just released the version of 2.3.2 which includes a newer Redactor version. This is probably fixed now, but let me know if it's not.

[timoteh]

Just updated to the latest version and the bug is still here!

Apparently it's fixed on Firefox, but still here on Chrome 72.

I'm on a Windows 10 system.

[andris-sevcenko]

Can you reproduce this bug on https://imperavi.com/redactor/ ?

[lettie16]

I have the same issue using windows 10 on latest version of chrome. Latest version of craft and the latest version of the plugin. If I switch to code view the html appears but when scrolling it immediately moves the scrollbar to the bottom and just shows a blank black box and the scrollbar becomes frozen. I noticed on the imperavi page above if I add the same amount of text in and switch views the code view has a large amount of black space below the code i.e. the editor has kept the same height as the text mode. I'm wondering if this maybe part of the problem. Currently it's impossible to use the code mode.

Just noticed as well it only occurs when switching from a long text view to the code view. If you have an empty redactor field and you switch to code view and paste in the code the scroll bar works ok inside the field.

[andris-sevcenko]

@lettie16 can you reproduce this bug on https://imperavi.com/redactor/ ?

[lettie16]

Can you reproduce this bug on https://imperavi.com/redactor/ ?

Hi Andris,

No I can't replicate it on this site. But I don't think this is a like for like comparison I believe it has something to do with how it is interacting with the craft cms field. as I mentioned above if you have a clean empty field pasting into the code view works fine but the scrollbar is within the edit like this this editor.

If you paste in a lot of text in the text view and then switch to code view the problem occurs and the scrollbar appears outside of the editor ie scrolls the whole field panel not just the editor except it doesn't because it freezes up.

I think it maybe something to do with how the code is re-calculating the height of the editor after switching views.

[angrybrad]

Having a hard time reproducing this on Windows 10, Chrome 72 and the latest version of Craft 3 and Redactor. Can someone maybe record a quick video of the behavior in case I'm missing a step somewhere?

[timoteh]

@angrybrad

https://streamable.com/f6we5

(The wait before trying to click on the scrollbar is me trying to scroll with the mouse)

[angrybrad]

@timoteh hrm... maybe it has something to do with the being inside of Matrix/Super Table? Can you send your composer.json file and a database dump over to support@craftcms.com and reference this issue and point us to the entry/field in the video you used?

[timoteh]

I tried using it outside of a Matrix/Super Table and the result is the same.

@angrybrad , done!

[angrybrad]

@timoteh I was initially able to reproduce this after some time, but going back to it I no longer can. Can you make sure you're on the latest Chrome/Reactor and Craft and see if it's still an issue for you?

[timoteh]

@angrybrad
Just tried in Chrome, still the same.

Google Chrome
Version 73.0.3683.103 (Official Build) (64-bit)
Craft CMS 3.1.23
Redactor 2.3.2

[angrybrad]

@timoteh maybe it has something to do with screensize/resolution? are you running with the browser maximized and at what resolution?

[timoteh]

@angrybrad Yes, maximized, but even when i try to play with the screen size, i always get the same result. I've tried to reproduce it on multiple Craft 3 setups and i always can!

My coworkers on iOS are not able to reproduce it anymore, so here is my setup:

Also, what about you @lettie16 ?

[JamesCatt]

Also seeing this issue on Win10 + Chrome 74.0.3729.131 + Craft 3.1.25 + Redactor 2.3.3.2

I noticed in the dev tools that something in the javascript appears to be caught in an infinite loop, as it starts setting this div to "display: none" over and over again:

<div class="redactor-styles redactor-in redactor-in-0" dir="ltr" aria-labelledby="redactor-voice-0" role="presentation" contenteditable="true" domtargetshow="" style="display: none;">

Some more notes:

• It seems as though the javascript is forcing the scrollable element to scroll all the way to the bottom.
• It stops if I click on a different field layout tab (i.e., hiding the redactor field).
• With a longer post it seems to not be triggered immediately on scroll—I have to scroll down a certain amount before the bug kicks in.

[croxton]

Found a CSS solution to this by preventing the contenteditable div that holds the WYSIWYG content from being set to display: none when the source div is visible, which in turn seems to stop Redactor going into an infinite loop. Add this CSS to your CP:

.redactor-source-view [contenteditable="true"] {
    display: block !important;
    height:0 !important;
    width:0 !important;
    padding:0 !important;
    overflow: hidden !important;
}

Testing in latest Chrome and Firefox on Mac, and Chrome on PC.

You can test with this handy plugin for adding CSS to the control panel: https://github.com/doublesecretagency/craft-cpcss

[andris-sevcenko]

@croxton thanks for the fix! Since I'm still not able to reproduce, just going to rely on that :)