1

I have a template which has a background image with background-attachment: fixed; in the header. Please see the link attached:

http://simpleqode.com/preview/wolfram/2.2.2/index_crossfading.html

body.classic .welcome_classic {
  display: table;
  height: 100%;
  min-height: 100%;
  width: 100%;
  background-image: url(../img/bg-pattern_alt.png), url(../img/screen-bg_11.jpg);
  background-position: top left, center center;
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
  background-attachment: fixed;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.18);
}

The problem is that on iPhone the background image gets 'zoomed' multiple times you can't see the image.

enter image description here

Removing background-attachment: fixed; resolves the issue. Any ideas?

sdvnksv
  • 9,350
  • 18
  • 56
  • 108
  • What are you seeing? I'm seeing this which looks normal http://jerrylow.com/demo/stackoverflow/38619441.png – jerrylow Jul 27 '16 at 17:51
  • Possible duplicate: http://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios – jtmingus Jul 27 '16 at 17:55
  • I see - are you testing in iOS7? – jerrylow Jul 27 '16 at 18:03
  • @jerrylow, I tested it on iPhone 6s on BrowserStack and got what attached :-( – sdvnksv Jul 27 '16 at 18:04
  • @jtmingus, they suggest to include another div with position: fixed; I was hoping to something with the original container. – sdvnksv Jul 27 '16 at 18:05
  • @Deka87 I'm not sure how accurate your results are. I also tested on a real device and not seeing the issue. This is also from browser stack on iPhone 6s http://jerrylow.com/demo/stackoverflow/38619441-2.png – jerrylow Jul 27 '16 at 18:09
  • @jerrylow that's weird, because this is what I get (attached to the post). Maybe you chose Chrome (although I doubt). – sdvnksv Jul 27 '16 at 18:17
  • @Deka87 nope the Chrome browser controls are on the top and I just tested in Chrome as well and everything is well. – jerrylow Jul 27 '16 at 18:28
  • @Deka87 but it does talk about how having a `fixed` background is disabled for iOS because the repainting is two expensive, which is why they were looking for a workaround – jtmingus Jul 27 '16 at 18:33
  • @jtmingus, yeah I remember john Irish mentioning this. It's just disabled on many mobiles(and pads) – damiano celent Jul 27 '16 at 18:54

0 Answers0