Users reported being unable to scroll on mobile browsers when attempting or previewing a quiz containing essay questions in Moodle 4.3.3 and later on touch enabled devices (mobile + tablets). Initial testing confirmed the issue is tied to the Atto HTML editor that is utilized for essay question type questions.

The problem persists across iOS and Android devices, with scrolling disabled.

Debugging identifies problematic styles in the body tag of the quiz attempt page, specifically an odd touch-action: none; and overflow: inherit;. being applied at the body style level. These styles prevent scrolling functionality.

Steps to Replicate:

1. Create a quiz in Moodle 4.3.3 or later and include an essay question.

1. Ensure Atto HTML editor is set as the default editor.

1. Access the quiz on a mobile device (iPhone or Android) using Safari or Google Chrome.

1. Attempt to scroll within the quiz page. Scrolling will not work.

CSS Hotfix Applied:
To resolve the issue temporarily, add following CSS to your theme stylesheet:

{{@media only screen and (max-width: 768px) { /* Target mobile and tablets */

body#page-mod-quiz-attempt

{ touch-action: auto !important; }

}}}

or for anytime the editor appears

/******* 11-14-2024 Hotfix: Fix for pages with ATTO editor unable to scroll (MDL-83728) *********/

@media only screen and (max-width: 768px) { /* Target mobile and tablets */

    body:has(.editor_atto_wrap), /* Modern CSS selector targeting pages with Atto editor */

    body:has(.editor_atto) {

        touch-action: auto !important;

    }

} 

The css override successfully restores scrolling functionality but the root cause remains unclear. The issue is completely resolved if a user switches their preferred HTML editor to TinyMCE so the issue appears to be related to the Atto HTML editor or YUI components, but I can't identify the specific trigger.

Issue was brought up on a moodle forum in February of 2024.