199 posts
  • Has sold $40,000+ on Envato Market
  • Made it to the Authors' Hall of Fame
  • Contributed a free file of the month
  • Has been part of the Envato Community for over 2 years
+3 more
ikaruna says

Hello,

I have stumbled upon a bit of a problem, the background position fixed/cover is killing me (is not working properly on iOS devices), anyone knows a solution for this (without JS)?

Thank you!

1781 posts
  • Contributed a free file of the month
  • Has sold $1,000+ on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 1 year
+11 more
SamBerson says

Hey there. What item are you requesting help about? Please contact the author directly so they can assist you.

199 posts
  • Has sold $40,000+ on Envato Market
  • Made it to the Authors' Hall of Fame
  • Contributed a free file of the month
  • Has been part of the Envato Community for over 2 years
+3 more
ikaruna says

Hey there. What item are you requesting help about? Please contact the author directly so they can assist you.

:) , I’m not a buyer, I’m an author, I’m talking about my item, which I can not post here.

1781 posts
  • Contributed a free file of the month
  • Has sold $1,000+ on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 1 year
+11 more
SamBerson says

Please email me with further details of your question, including a link to the item.

115 posts
  • Has referred 50+ members
  • Has sold $125,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 100+ items on Envato Market
+5 more
nagaemas says

It seems your issue is a known, but not widely described issue about background-size cover and background-attachment: fixed on iOS. I’ve also experienced this the first time I created a one page theme, it happens on all mobile Safari/Chrome.

The viewport’s height unlike on desktop browsers is interpreted not as the visible part of your screen but the whole page itself. This makes your background-image stretch, having the same height as the height of your whole page, thus if you have a very long page, the image’s height will be the same as the height of your page.

It’s better to just set the background-attachment to scroll on iOS devices. This needs to be done via JS for detecting iOS, but a non-JS solution would be using media query to just set the background-attachment to scroll below a specific screen width.

Hope that helps.

by
by
by
by
by
by