-
Posts
-
Hi there,
when using a color section I have the option to include a background image and mark it as “fixed” in position, resulting in a quasi-parallax effect. This works fine on Firefox and Chrome, but is very choppy on Safari (Mac) and does not work at all on the iPad – the image just scrolls with the rest of the page.
You can see it here: http://www.presentpro.de, on the home page. It’s the section with the three icon boxes at the bottom.
Thanks for looking into this!
Andy
I second that
Just set up a color section with a FIXED image in it with a quote over the top. Looks fine on my Mac & Safari but doesnt work at all on IOS devices. The text (quote) appears as it should but no image
Cheers
Andy
Hi andypeck,
it works fine in Safari (Mac) on your end? Can you give me your URL to have a look? Like I said, the fixed background image does move in the color box when viewed in Safari, but with a noticable delay.
I marked this thread for Devin – he can test websites on a Mac/IPad. position:fixed is not supported on all mobile devices ( http://stackoverflow.com/questions/4889601/css-position-fixed-into-ipad-iphone ) and if you want a consistent design on all devices I’d recommend to use a “scrolling” background instead.
Thanks Dude, I wasn’t aware that this is a general issue for iOS. In fact, I’ve just checked a few other parallax themes on iPad (907 etc.), and indeed, no parallax.
So, this leaves the “Safari on Mac” issue. Thanks for your help!
Hi andikleinke,
I’m not having any issues when I look at the url mentioned in your original post.
Regards,
Devin
Hi again,
I stand corrected – the picture does load on Safari but the parallax effect doesn’t work properly. It sort of has a delayed effect that alternates between two versions – very odd.
Anyway, Safari hates on Mac and it doesnt work at all on any browser on IOS devices – therefore I guess if one is to be 100% cutting edge its useless to incorporate it until it works. In a world where every client expects sites to be IOS compliant (at least mine do) then perhaps either a warning should be given pre purchase or a better work around found.
Darn it – its such a good effect too
Cheers anyway
Andy
Hi Devin,
thanks for checking this issue out. Can you please tell me a bit more what you mean by “not having any issues”? So you viewed my site using Safari on a Mac, and the fixed background image behind the three icon boxes scrolled properly?
Here’s a quick screenr video showing what I’m seeing on each of the 5 Macs I’ve tested the site with:
Same site in Firefox (Mac): this is how it’s supposed to look:
Thanks,
Andy
Hey Andy,
No, not on a mac but on my ipad. Kriesi is actually the only one who has a Mac at the moment. But the scroll is smooth on the page itself.
And yes Tsukassax it looks like Fixed is not a valid option for iOS because of the OS constraints. Perhaps Kriesi can find a way around them with a hack or something like that.
Regards,
Devin
Hi Devin.
Check this theme out on Ipad. They seem to figured out the fixed problem.
Maybe you can check their source code?
Hey, andyhoodified is right. Someone appears to have found a way to make it work on Ipad.
This theme http://purestudio-dev.gozawi.com/ is working on my ios devices
Great stuff. Fingers crossed we can get the same
Andy
Kriesi is tagged on the topic so he can see if the same thing can be integrated in to the Fixed position option. It looks like they are just using position:fixed with 50% 50% positioning but perhaps there is something more to it.
Regards,
Devin
If it is 50% 50% positioning then maybe it would be an acceptable solution for now on ios – Personally, I cld live with it but i’d love to still use the proper effect for MAC & PC. Is it possible for a system check that recognized the platform and switches between compatible versions. Just a thought – would be better than just having to rule it out altogether or allowing it be appear buggy.
Cheers
Andy
It just depends on how Kriesi wants to or can add it in. I’m going to close this topic for now until Kriesi can take a look and respond since there isn’t much we can do at the moment.
Regards,
Devin
Hey Guys! Just worked out a solution for this. Since this is very random and seems to be connected to the fact that it only appears when a slideshow is used on the same page I am not sure if the solution I used will fix the problem for everyone.
The next update will include the bugfix (will be released during the next few days). If you still encounter any issues please open up a new thread then ;)
But for the majority of you the problem should be gone and it should work fine on all desktop browsers. As for fixed images on iOS: still havent seen a site that was able to pull this off, also the demos linked here that claim to work on iOS dont work for me…
- The topic ‘"Parallax" effect does not work on iPad, and very choppy in Safari (Mac)’ is closed to new replies.