Problem on newer iphones

Support
#1

hi there,

on newer iphones there seems to be a problem with the header image on all other mobile devices it looks ok.

here is a picture how it looks on iphone (Not OK):

here is a picuture from android (OK):

thanks in advance
credentials in secure note

#2

Hello Harald,

Thanks for posting in! This could just be a caching issue. Could you please disable PageSpeed or any caching that is caching the image because at the moment, it is not displaying properly.

Please let us know how it goes.

#3

hi,

i disabled pagespeed and all other cahing plugins.
i dont believe it has anything todo with this plugins because it is ONLY on iphones. all other devices are showing the page correct.
i cleared the style cache also.

when the page was on the staging server (no cahcing on) the same problem was also there.
is that a problem with the fixed background image and position top?

thanks in advance for your help.

#4

Hi Harald,

Thanks for reaching out.

It’s due to this https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios.

There is an existing CSS

.x-masthead .x-bg .x-bg-layer-lower-image, .x-masthead .x-bg .x-bg-layer-upper-image {
    background-attachment: fixed;
}

And it’s not present on my installation, it appears to be a custom CSS. Please remove it, that styling is usually for parallax effect but header bar background has no parallax option.

Thanks!

#5

hi rad,
ok when i remove this css code, my fixed header background is gone.
i need a fixed header bg. how can i archive it then? i tried it with parallax but tehn it does not scroll smoothly…
any idea?

i will try it myself or will do it via media query…
if you have an idea pls share :slight_smile:

thanks in advance

#6

hm one more question how can i fix the :after element?

this seems to be the fix:

cheers

#7

Thanks for sharing! And yes, you could use @media if you prefer to have fixed background for desktop while skipping for mobile.

#8

hi rad, thanks i did it with media. so only screens above 980px will see the header image fixed.

thanks again.
is there chance you can implement the iphone workaround directly in the pro header builder? would be awesome

cheers

#9

Hi Harald,

You mean convert that CSS to Pro header CSS? Yes, you could do that, example, you can add this CSS to header bar’s Element CSS.

@media (min-width: 980px) {
$el .x-bg .x-bg-layer-lower-image, $el .x-bg .x-bg-layer-upper-image {
    background-attachment: fixed;
}
}

Thanks!

#10

hi,

no i mean th iphone fix: (from stackoverflow https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios)

Now this is the magic, the body:after is fixed, and not the background:

body:after{
  content:"";
  position:fixed; /* stretch a fixed position to the whole screen */
  top:0;
  height:100vh; /* fix for mobile browser address bar appearing disappearing */
  left:0;
  right:0;
  z-index:-1; /* needed to keep in the background */
  background: url(https://www.w3schools.com/css/trolltunga.jpg) center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

how can i make that in pro?

thanks

#11

Hi Harald,

You can add a unique ID to your bar.

For example add mybar

Then add this in Header > CSS

#mybar:after{
  content:"";
  position:fixed; /* stretch a fixed position to the whole screen */
  top:0;
  height:100vh; /* fix for mobile browser address bar appearing disappearing */
  left:0;
  right:0;
  z-index:-1; /* needed to keep in the background */
  background: url(https://www.w3schools.com/css/trolltunga.jpg) center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Hope that helps

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.