Every now and then I need to make a website. And I noted in my last project that
background-attachment:fixed;Come on Apple! This is so basic... please don't become the new IE.
This absolutely needs to be fixed and it's so ridiculous that Apple still hasn't done it, but I came across a decent workaround if anyone can't wait for Tim Apple to wave a magic pencil:
https://codepen.io/callumfindlay/pen/VaYeoW
2022 and this basic property still not supported
As long as the background property fixed value is not supported and might not be supported in the future at all, I have a massive problems to apply the background using CSS background property anyway. I'm building WP custom theme and all images inserted by background property are not visible on iOS devices.
Is this normal? I have opened the thread here https://stackoverflow.com/questions/72633738 but no one knows why this is not working.
My background is inserted like this:
`.services {
position: relative;
background-image: url(https://exp-theme.local/wp-content/themes/exp-theme/img/brick-wall-mobile.jpg);
background-position: right;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}`
Exactly the same story is with .svg icons they are not clickable on iOS devices, I must use .png instead otherwise users are not able to click on them.
I hear a lot of people complaining about how this is apples fault but it is not it is disabled for a good reason page speed of websites. When you make a website you want your end users to to see your website as fast as possible but if you use your background-attachment fixed you make that container re-render the image every time you scroll because of this mobile devices deactivate this feature on all devices. think about your end users when making a website.
I found a solution. And it works really well with recent iPads.
Feel free to copy!
Just beneath the body tag add a
<div id="iPad"></div>
Then style that as:
div#iPad { position: sticky; background: <your image + settings>; top: 0; margin: 0; height: 100vh; margin-top: -100vh; z-index: -1 }
I put it on all pages of my site. Shame I can't post the URL here but it's Whitelight Production. Search it. You will see it in action there.
It works!!
Took me a while to come up with this.
Hi HenryGilbert, unfortunately your solution is NOT working. But this on is approved and is working: https://codepen.io/callumfindlay/pen/VaYeoW (Codepen on iOS won't work as it's viewed in an iFrame, but when implemented correct, it's working)
Looked at your solution inside the iframe but could only see a floating fixed text while background scrolled. A better demo would be "Lorem Ipsum" text scrolling over a fixed wallpaper. My solution worked on recent iPads. Might not work on iOS mobile, as I didn't use or test it there. Isn't there some other place you can post your solution? I'd like to see a final solution that works on all iOS. That can be seen live on iOS. The simplest vanilla CSS possible. So everyone can understand and use.
It's 2023 and iphones are capable of loading insanely heavy page loads with loads of modern animations: but, Apple still cannot load a simple fixed background image properly.
That's really insulting to your customers Apple, especially your developer customers that are capable of understanding how absurd your stated reasoning is.
Apple it's getting pathetic at this point. I'm actually having to add hacky code to my CSS just to avoid this issue. Please fix this for crying out loud!
Lo curioso es que las paginas webs desarrolladas en Wix, si permiten el fondo fijo ¿por qué?
How is this not implemented yet?
Really........?
Don't worry guys, they'll soon implement it by 2060 and of course it will the most revolutionary change in the history of web designing ever spearheaded by Apple itself!
-
—
sergiofores1
-
—
carlosmma__
Add a CommentPlease apple, fix this problem. Come on... It is ridiculous
Apple is just plain stupid regarding web development, it's a ******* stone in front of the progress lol. I will never buy any of their products again.