Additional scroll bars in canvas

Why they are there and how to get rid of them!

The Problem

I recently noticed a few pages in my content in Canvas had developed scroll bars at the bottom. The bars were greyed out and had no function.

Scroll bar visible at the bottom of the canvas page.
Scroll bar visible at the bottom of the page

I started to notice a pattern. Any content which took up the whole width of the page (100%) was triggering the scroll bars. It could be any type of content; a banner image, an embedded padlet, or like in my example progress bars.

The Fix

Canvas must have changed the HTML “overflow” settings somewhere on their end. An easy fix is to adjust any 100% width content to be 99% instead. This can be done in the HTML editor area accessed by this icon in the edit screen: </>

Canvas HTML editor showing width element.
Canvas HTML editor showing width element
Scroll bar has disappeared on the canvas page.
Scroll bar has disappeared