Our corporate website is undergoing some strange fraud. It looks great in any browser when you view it on a desktop PC or laptop. However, when you travel to a website on a mobile device, you get these borders around page elements in both Safari on iOS and Chrome and Android 2.2 Stock Browser on Android.
When studying the problem, I noticed that the borders are also displayed in Chrome on the desktop / laptop, but only at certain zoom levels:
100% scaling:
110% scaling:
Strange, the lines are not consistent at different zoom levels:
This is done with 90% scaling.
So, to clarify: I can reproduce the problem that I see on mobile devices by scaling in Google Chrome on a laptop / desktop. But when I download a website to a mobile device, I always see lines, regardless of the zoom level.
The whole site gets its scheme through tables (Yes, I know ... It was created many years ago as a template in Typo3, and although we can make small changes to it, rebuilding the entire template is not an option. But this is an issue.), So I thought this might have something to do with CSS rules for tables, but nothing seems to be happening with this. And if it were a CSS problem, could the lines be consistent at different zoom levels? This is the CSS file for the template: Pastebin
In any case, we are a little stuck in this, not knowing what causes the problem. If anyone has ever come across anything like this, any enlightenment on this subject will be appreciated. Thanks.
Edit: Just tested this on IE, Firefox, and Safari on the desktop. There are no boundaries, regardless of the zoom level.
Edit2: Scaling up to 500% (Chrome on the desktop) shows that some of the lines are blue, some are white and some are gray, in accordance with the color scheme of the website. They are also not equal in length and seem to change position when I browse the web page (i.e.: move a little more left / right.)