Help Needed: Safari iOS mobile browser compatibilty

I’m creating my portfolio page in Codepen as per the FCC challenge. I’ve decided to go with a Fixed background, scrolling site. The pen, so far, works perfectly with all major browsers, except Safari iOS mobile (on my iPhone 6s).

The issue is in the background images within the divs not :cover-ing. It works fine in Safari on desktop.

Here is the pen

I posted a question on Stack Overflow, but I find they aren’t so receptive to noobs, lol. Any help or feedback would be greatly appreciated.

Yes, the background-attachment: fixed doesn’t work in iPhone.

Here’s my personal thought on this… users on iPhone have small displays, so it’s important to remove all the “cruft” and not so important eye-candy stuff. So you only present the important information to the user.

This is where Bootstrap classes like “hidden-xs” come into play so you can automatically not show these extra fluff for mobile users.

owel, thanks for the reply. I was looking at documentation for background-attachment compatibility, but couldn’t find what I was looking for. So a fixed bg scrolling site like this is not possible on iPhone? or just not using that method? I agree with what you said about Content > Eye Candy, however, my thinking was that a portfolio site pertaining to front-end web development/design should have a certain level of awe-value. Back to the drawing board I suppose…

On a phone, the background image is just displayed… but it’s not fixed. It just scrolls up with the rest of the page.

Interesting. However, the background (on my phone) doesn’t even adhere to the attributes inherited from the basic CSS. It should default to the attributes inherit to the browser defaults, no?