Horizontal scroll bar appears on tablets or when a page is zoomed

When a page is manually resized, sometimes a horizontal scroll bar will unexpectedly appear.

Reviewed August 17, 2023

The Issue

When UBCMS pages are resized to display on a small screen device (smartphone versus a larger desktop monitor), the pages automatically adjust so the adjustment is 'transparent'.  Images, styling, location of navigation, etc. all adjust seamlessly to make it easy to read and navigate. The page still scrolls vertically, but it is not normally too wide to be viewed, and there is no undesirable horizontal scrolling.

We have discovered this works well when a page is loaded for small screen devices, but occasionally if a browser tab is resized manually (e.g. zoomed), or if the page is loaded onto a mid-range tablet size (720-960 pixels), the UBCMS may not correctly identify the preferred version, the content remains too wide for the user's display size, and a horizontal scroll bar appears.

Workaround

There is no workaround but we are working on a programmatic solution to prevent this from happening.

We are making a short-term change to our pages to address the problem by shrinking the page content just enough to fit without horizontal scrolling at the affected window sizes. We have not been able to address the situation when manually zooming the browser triggers 2-dimensional scrollbars.

We are in the process of migrating our pages to use fluidic dimensions and more breakpoints. This will allow the users to both resize the content as well as resize the browser without producing horizontal scrollbars. While we expect this improvement will fully address the problem and comply with the WCAG success criterion, we expect it will not be available to all sites until fall 2024.

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)
(Required)