CODEWITHSUNDEEP
htmlcssios
Soumya Roy
Soumya Roy

Reputation: 345

Background-size CSS property not working correctly in IOS devices on safari

I have a body background size set. It works well as intended in android and windows. The size of background is okay there. But when loading my site on iphone the background size specifically the height looks too big to be 5%. background-size: 85% 5%; So the width is 85% of the body and height is 5% of the body but the height looks 50% of the viewport which is weird. Why this is happening only on iphone. Adding webkit prefix won't work I think. Is there anything wrong with ios and safari ...? Am I missing anything ...? Help me to fix this if you know what's going on. Thanks in advance ...

CSS

body 
{
    background: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white) fixed;
    background-repeat: no-repeat;
    background-position: top center; 
    background-size: 85% 5%; 
}

How browsers calculate the body background height ..? Other browsers are taking viewport height but in iphone the parameters are not matching up ...

Upvotes: 1

Views: 325

Answers (2)

a.barbieri
a.barbieri

Reputation: 2616

The way you used fixed is a shortcut for background-attachment: fixed;.

This property isn't well supported. Check Can I Use to know what's the current support.

A fixed-position element with a height set to 100% behaves just like the element with background: .... fixed; property.

So, instead of having a property on body you should create a div this way (see the one with background class):

<head>
<style>
  .background {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white);
    background-repeat: no-repeat;
    background-position: top center; 
    background-size: 85% 5%; 
  }
  .long-div {
    height: 100vh;
  }
</style>
</head>
<body>
  <div class="background"></div>
  <div class="long-div">Scroll down to see it how it behaves on scroll 👇🏻</div>
  <div class="long-div">Here you are at half of the scroll 👇🏻</div>
  <div>Here you are at bottom of the scroll.</div>
</body>

You can find a well documented article on CSS-TRICKS The Fixed Background Attachment Hack.

Upvotes: 1

Steve Walson
Steve Walson

Reputation: 470

For iPhones safari, I think you have to add background-attachment in the media query

@media (max-width : @iphone-screen){
background-attachment: scroll;

}

Upvotes: 0

Related Questions