Something strange is happening with our company's website. It appears perfectly normal when viewed on a desktop computer or laptop using any browser. However, when accessed on a mobile device, borders start showing up around the page elements in both Safari on iOS and Chrome on Android 2.2 Stock Browser.
Upon further investigation, I noticed that these borders also appear on Chrome on a desktop or laptop, but only at specific zoom levels:
At 100% zoom:
At 110% zoom:
The odd thing is that the lines are inconsistent across different zoom levels:
This screenshot was taken at 90% zoom.
To clarify: I can replicate the issue seen on mobile devices by zooming in and out on Google Chrome on a computer. However, when the website is loaded on a mobile device, the borders are always present, regardless of the zoom level.
The layout of the entire website is based on tables (yes, I know... it was created ages ago as a template in Typo3 and while we can make minor changes, rebuilding the entire template is not an option. But I digress.) so I suspected that the CSS rules on the tables might be causing the problem. However, upon inspection, there doesn't seem to be anything wrong with them. If it were a CSS issue, wouldn't the borders be consistent across different zoom levels? Here is the CSS file for the template: Pastebin
Regardless, we are struggling to identify the root cause of this issue. Any insights from someone who has experienced something similar would be greatly appreciated. Thank you.
Edit: I tested this on IE, Firefox, and Safari on a desktop. No borders appeared there, regardless of the zoom level.
Edit2: Zooming to 500% in Chrome on a desktop reveals that some of the lines are blue, white, or gray, matching the color scheme of the website. They are also unequal in length and seem to shift position as I scroll through the webpage (for example, moving slightly left or right).