(Mobile Device) Parallax image scaling

[charlydsgn]

Parallax image does not scale in safari on my iphone 5s. See below.

[808loud]

Unfortunately, upon searching, there are issues with the intended implementation on mobile (iOS especially):

1. https://twitter.com/paul_irish/status/306818591196602368
2. http://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7
3. http://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios

I'll continue searching for a suitable resolution.

[808loud]

A couple possible solutions:

• https://ihatetomatoes.net/make-parallax-website-responsive/
• https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/
• https://jeffclayton.wordpress.com/2015/04/28/css-hacks-for-safari-6-1-7-and-8-not-chrome/
• http://browserstrangeness.bitbucket.org/css_hacks.html#webkit
• http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property

[808loud]

I am trying to narrow down which devices / versions of Safari exhibit this buggy behavior.

@charlydsgn Can you let me know which phone, iOS version, and (if possible) Safai version you have?

Also, if you wouldn't mind, a screenshot of this page would be valuable as well.

[808loud]

I am doing some troubleshooting on the develop site.

Please excuse the mess :stuck_out_tongue_winking_eye:

[charlydsgn]

static on mobile

On Jun 25, 2016, at 11:07 AM, David Monson notifications@github.com wrote:

OK I have figured out a way for the site to display different images, depending on whether or not it's an iOS device. Since iOS devices do not support background-images that are position: fixed and also size: cover (aka: parallax), I would propose two options:

Show a static image on iOS devices Do not show that image on iOS devices Let me know which you would prefer.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[808loud]

Sounds good. I just pushed the code for that. You should be able to give it a try.

http://rawgit.com/808loud/charlie-portfolio/master/public/index.html#break_time

If it isn't working, feel free to re-open this issue.