Recently I came across a nice css trick for debugging unintentional scrolling due to ghost CSS elements. All credit is due to Kyle Werner from wernull, so please visit his site, thank him, and support his projects.
Why did I need to do this? Well, I discovered an issue on my iPad Air 2 with content overflowing outside the page container if I switched from landscape to portrait mode. This meant that a user could scroll / swipe right and see unwanted horizontal scrollbars.
Hopefully this screenshot helps a bit:
The above screenshot was rendered using Kyle Werner’s css trick:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}This made it easy to track down the issue, which was that my Bootstrap3 “container” class for tablet widths at 768 was too wide, so I decreased its width until the content fit properly within the page. Before this I tried to fix the problem by setting “overflow-x: hidden;”, which solved the unwanted scrolling problem but masked the real problem of content overflowing out of the page. It also led to awesome new bugs like scrollbars being totally invisible.