How to Fix Background-Size: Cover Issues on Mobile Safari?

CSS Background-Size: Cover Replacement for Mobile Safari

Mobile Safari's unexpected behavior regarding the CSS property background-size: cover has prompted the need for an alternative solution. This problem manifests as images failing to fully cover their respective divs on iOS devices.

Solution:

To resolve this issue, it's necessary to override the default background-attachment: fixed property on mobile devices. By setting background-attachment to scroll in a media query targeting iPhones, the background image regains its desired behavior:

.section {
  background-size: cover;
  background-attachment: scroll; /* Override fixed attachment */
}

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

Note: The variable @iphone-screen is expected to be pre-defined.

By implementing this solution, background images will seamlessly cover the entire div, regardless of its width or the height of its content. The background-size: cover property now functions as intended, providing a consistent and visually appealing experience on Mobile Safari.

The above is the detailed content of How to Fix Background-Size: Cover Issues on Mobile Safari?. For more information, please follow other related articles on the PHP Chinese website!