Menu
We're finding the the iPad is displaying thin grey/black lines on our site. It seems to be some form of scaling-artefact on mobile Safari. I've provided two snippets of pages below, with the contrast tweaked to highlight the issue, unfortunately because the iPad display is quite good, these lines are quite noticeable.
They seem to come and go as the page is zoomed, and look like divs/images are being scaled with rounding issues at the edges, causing the edge pixel to be blended with black.
Has anyone found a workaround or fix for this?
Thanks
981
This is how I stopped the appearing/disappearing thin black horizontal line on iPad 14.3. Go to Settings > Accessibility > Motion > Cross-Fade Transitions. Toggle off. Hope this works for you.
These shapes are caused by a Guided Access security feature that permits a user to designate areas of the screen that they want to block from being accessed. Any area on the screen where the dark grey shape appears is rendered temporarily disabled to your touch.
Answer: A: Begin with a forced-restart of your iPad - as this will often resolve an isolated issue: On an iPad with a Home button: Press and hold the top button and the Home button at the same time. When the Apple logo appears, release both buttons.
I tried a bunch of fixes to remove these grey-ish tiny lines when mobile-safari was zoomed in, and the simplest and most flexible fix I found was here:
http://www.oddodesign.com/2010/css-tip-how-to-prevent-div-seam-lines-from-appearing-in-apples-mobile-safari/
Essentially, you add
margin-bottom:-1px;
To elements that are getting phantom line borders added.
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
