Borders on certain zoom levels on webpage

Question

Our corporate website is going through some weird shenanigans. It looks fine on any browser when you view it on a desktop pc or laptop. However, when you surf to the website on a mobile device you get these borders around the page elements both in Safari on iOS and Chrome and Android 2.2 Stock Browser in Android.

While looking into the problem I've noticed that the borders also appear on Chrome on a desktop/laptop, but only at certain zoom levels:

100% zoom:

110% zoom:

Weird thing is, the lines aren't consistent throughout the different zoom levels:

This is taken at 90% zoom.

So to clarify: I can reproduce the problem I'm seeing on the mobile devices by zooming around in Google Chrome on a laptop/desktop. But when I load the website on a mobile device, I always see the lines, no matter what the zoom level is.

The entire website is given its lay-out through tables (Yes, I know... It was build ages ago as a template in Typo3 and though we can make small changes to it, rebuilding the entire template is not an option. But this aside.) so I thought it might have something to do with the CSS rules on the tables, but there doesn't seem to be anything wrong with that. And if it were a CSS problem, wouldn't the lines be consistent on the various zoom levels? This is the CSS file for the template: Pastebin

Either way, we're a bit stuck on this not knowing what's causing the issue. If anyone has ever encountered something like this, any enlightment on the issue would be appreciated. Thanks.

Edit: Just tested this on IE, Firefox and Safari on a desktop. No borders there, no matter what the zoom level is.

Edit2: Zooming to 500% (Chrome on a desktop) shows that some of the lines are blue, some are white and some are gray, according to the colour scheme of the website. They are also not equal in length and seem to change position when I scroll around the webpage (i.e: move a bit more to the left/right.)

Answer 1

This sounds similar to space/gaps between divs on website when viewed on iPhone/iPad ("On an iPad, when a website is viewed at a scale under 100%, some artefacts appear sometimes. One is particularly visible: a 1 pixel lines between divs, just like on your site, under the menu")

The solution to that answer suggests you either:

• Disable zooming (if you have designed for viewing at that particular size)
• Have a 1px overlap on elements (e.g. margin: -1px)

The overlap fix has worked for me in the past, though this might be harder with a table-based layout.