Fix for gaps in background images on iPhone and iPad
When making this blog I came across an issue when viewing my site on the iPad. Gaps between background images were appearing, different gaps at different zoom levels. The issue is with the way iOS rescales all the elements on the page to fit the smaller screen. When it does this it often leaves a 1 pixel gaps between divs.
The fix is to add -1px to the margin where the lines are appearing, that way the divs overlap slightly. So in my case I needed to add -1px to the top margins:
margin-top: -1px;
Hope that helps!
My name is Steve Gardner and I'm a Lead Front End Developer at Jigsaw.
I work with stuff like Flash and HTML5 to make things like games, mobile apps and websites. I also occasionally play around with Arduino.
This blog serves no real purpose except to spread joy and happiness to every single human being on the planet and, on occasion, discuss things I make and find on the internet.
Comments
What's that you say?