Mind the Gap

Recently, Mike and I needed to put our heads together in order to solve a rendering problem our buddy George was experiencing; George was seeing gaps — vertical and horizontal — all over our client’s application, yet neither Mike nor I did.

Of course if all you have is a hammer, everything looks like a nail, so we dove straight in with browser inspectors and started poking around at the CSS… to no avail. We even tried to circumvent the built-in browser CSS in the hope that we’d stumble across to some heretofore unnoticed -webkit-margin-after with a spurious configuration. No joy.

We soon realized that the issue was not browser-specific, but machine-specific. Using George’s computer, we could reproduce the issue in Chrome, Safari and Firefox, yet connecting to his computer remotely or running the codebase locally on our machines didn’t reproduce the problem.

At this point, it had to be down to machine config settings. I initially thought there may be a Mac equivalent of “Large fonts” — a headache discovered during my days of using a Windows machine — but it turned out all settings were reassuringly normal.

Until that is, we noticed the “Show scroll bars” setting:

Because this was set to show scrollbars “Always”, the browsers were reserving space for it in regions where the CSS “overflow” value was set to “visible” or “scroll”, but the scrollbar itself was only visible when the region was focused/hovered. Resetting this value to either of the other options removed the issue.

After confirming this also happened on several major sites with this setting turned on, we felt confident declaring that this was expected behavior, and that our client’s app would not look out of place for visitors with machines configured this way.

It took us a while to spot the cause because we were using an unfamiliar machine. Hopefully you’ve found your way here because you’re experiencing this issue and we’ve saved you some frustrating debugging. We’re not sure why some people would choose to configure their machines this way, but feel free to ask George ¯\_(ツ)_/¯

~ Andy Westmoreland, Developer and OSX Head-Desk Specialist

Originally published at blog.elevatorup.com.