Imgs do not resize for IOS (iPad, iPhone) every other platform works

[simonf]

Hi

I have been pulling my hair out for awhile now, as I cannot get my imgs to show correclty on the IOS platforms (iPad, iPhone etc) can someone offer some help....

My website is:
http://www.silvertreeestates.co.za

My CSS code for the imgs is:

.content-front{background:transparent no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;overflow:hidden;padding:40px 0}
.ste-content-block{background:transparent no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;overflow:hidden;margin-top:100px;padding:60px 0}

#listing{background-image:url(../../img/list.jpg);background-size:cover;background-repeat:no-repeat;}
#header{background-image:url(../../img/steback26.gif);background-repeat:no-repeat;color:white;background-color:#748178;}
#value{background-image:url(../../img/value.jpg);background-repeat:no-repeat;color:white;background-color:#00FF00;}
#ste-services{background-image:url(../../img/about.jpg);background-size:cover;background-repeat:no-repeat;color:black;}
#team{background-image:url(../../img/team.jpg);background-size:cover;background-repeat:no-repeat;color:#748178;object-fit:none;object-position:50% 50%;}
#contact{background-image:url(../../img/contact.jpg);background-size:cover;background-repeat:no-repeat;color:white;background-color:#748178;padding-bottom:200px;}

All help / suggestions fully appreciated, and thanks in advance....

[Beverleyh]

Which img in particular because they all looked to fit on iOS here?

To make things easier for us, try making a reduced demo in JSBin, JSFiddle or CodePe, since those platforms are easier to test and troubleshoot directly on an iOS device.

[simonf]

HI Beverley

Thanks for the reply. OK something weird is going on, if I run the site via various mobile simulators it seems to work, but if I go to my old iPadII or a friends iPhone4 it does not, all pictures look like this.

ipad example vs android:

iPad II


Android (Samsung)


as you can see on the android its perfect, but ios not so much.... thoughts & regards, s

[Beverleyh]

I see which image you're referring too now, but like I said before, try making a reduced demo in JSBin, JSFiddle or CodePen, because on those platforms, its easier for potential helpers to test and troubleshoot directly on an iOS device. The act of stripping back and refactoring the code will oftentimes help you identify the problem yourself too.

[simonf]

Hi Beverley

OK done

https://jsfiddle.net/SimonRWFish/2vjssbws/7/

As you will see on these imgs same issue

Laptop screen shot


iPad screen shot

[Beverleyh]

I think the "fixed" declaration for background-attachment is what's throwing things off in Safari (it's known for being buggy). This cleaned-up demo without it works fine... but add the "fixed" setting back in and it croaks https://jsfiddle.net/ka4phms0/

If you're trying to achieve an overall effect of long text that scrolls over a fixed background-image, you'll probably have to change your markup by adding an inner div to each ".big" div, which would then contain long, overflowing text.

[simonf]

Hi Beverleyh

Sorry for the delay in response.

Yes if I remove the "fixed" declaration it does work, BUT then looks like crap on other platforms... pulling hair out for Apple... WTF..... Android fan forever....

[Rihook]

Hi Simonf
Have you found any solution? I have the same problem and couldn't manage to solve it.

[simonf]

HI

Welcome etc... No not yet.... as I said below if i remove the "fixed" declaration it does work. But everything else gets messed up on other platforms so still looking for the answer if you find one let me know as well please