0

I am in the middle of putting together a really basic site, where the header has an image that is "fixed" (CSS) for a "paralax"-ish effect. However, on iOS devices, this background image renders out strangely, showing a very zoomed in version of the image when compared to literally every other browser/mobile device.

I have tried playing with all of the background-* properties, but I can't get any of them to work correctly for the life of me! I don't know if there's a -webkit-background-*I should be looking for, but in theory my implementation is fairly simple/standard!

Styles:

#header {
    padding: 3em 0;
    text-align: center;
    width: calc(100% + 10em);
    margin: 0 -5em;
    height: 500px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

#header .content {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
}

#header .content .logo {
    display: block;
    margin: 0 auto 1.5em;
    max-width: 75px;
    z-index: 2;
    position: relative;
}

#header p {
    font-size: 1.25em;
    letter-spacing: -.025em;
    margin: 0 0 2em;
    position: relative;
    z-index: 2;
}

#header:after {
    content: "";
    background-image: url(/static/media/16fcfe6…/will-stocks-profile.322ff34c.jpeg);
    opacity: .35;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 0;
    background-attachment: fixed;
    background-position: 100% 33%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

The HTML markup for the element in question:

<header id="header">
  <div class="content">
    <img src="/assets/images/Logo.png" class="logo" alt="Logo">
    <p>Tech reviewer, IT professional &amp; avid blogger.</p>
  </div>
</header>

Visiting the site (currently in a "test status) on any other mobile device/tablet (or even using Chrome DevTools devices) and the image displays exactly as intended. But visit it on an iOS device and you'll see that there's just a small section of the image visible (rotate to landscape and you'll see a little more) - it looks like the image becomes zoomed?

willstocks_
  • 23
  • 7

1 Answers1

0

I have now included a media query, which resolve the image sizing issue by using background-attachment: scroll; instead of fixed - however doing this removes the "parallax" effect on mobile devices (which I understand can be considered expensive):

#header:after {
  content: "";
  background-image: url(./../images/will-stocks-profile.jpeg);
  opacity: 0.35;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 0;
  background-position: 100% 33%;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(3px);
}

@media screen and (max-width: 999px) {
  #header:after {
    background-attachment: scroll;
  }
}

@media screen and (min-width: 1000px) {
  #header:after {
    background-attachment: fixed;
  }
}

In theory, it should be a simple job to build out a little Javascript snippet to keep an image pinned to the top, however I don't know how this will work with a background-image on an :after pseudo... And surely a JS scroll event listener is going to be more expensive than using CSS?

willstocks_
  • 23
  • 7