I have the oddest situation & I hope someone can help!
I created a webpage complete with responsive design & all & everything looks great on all screen sizes (at the time I only had access to Android devices). However, I recently got a work phone which is an iPhone & I pulled up my site on it & the images are all zoomed up too close. I even went & grabbed my Mom’s iPad just to make sure I wasn’t crazy & it was the same issue!
I can’t imagine what the problem could be. I have Android devices of all shapes & sizes & they display the page as it should. But iOS mobile devices is an entirely different animal.
Has anyone ever seen/heard of this before? Better yet, can anyone provide an assist?
The problem is a long standing one and is due to the use of background-attachment:fixed in conjunction with background-size:cover. When you use cover in conjunction with attachment fixed then ios incorrectly computes the available area as the whole document and not just the viewport. That means your image is stretched to the height of the whole document and therefore becomes massively wider in order to do this.
There is no solution anywhere for this for this apart from my 2 fixes below.
The first fix can be a css only fix but can only be used for one background image. The solution is not to use background-attachment:fixed at all but to place a fixed positioned element instead and then just add a normal background. This will enable it to user cover as per normal. I use a pseudo element on the body which is fixed positioned to cover the viewport and then apply the background image to it.
Here is the codepen with the full details,
(If testing on an iphone then you will need to do so out of the codepen iframe or use in debug mode).
The limitation of that method is that you can only have one image fixed to the viewport.
If you want multiple background images all to become fixed as the user scrolls then there is no choice but to use JS to augment the CSS. It’s quite complicated and requires a small plugin but I have a self contained demo on codepen that shows it working so the details are all there to inspect.
Those are the only solutions apart from removing background-attachment:fixed from the pertinent rules and then of course the image will just scroll as normal but will be the correct size. (You could do that with a media query for smaller screens but of curse the ipad is quite a large screen now so you would have to have the media query large enough for the largest ipad.)
Also note that this image is way too big a file size and took ages to load on my slow connection: It’s 2.5 mbyte and you should be able to optimize it down to about 250k without noticing the loss of quality much (500k at most). There are plenty of online tools about that will help optimize images if you don’t have a good paint package available.
