When viewing any of the MDB templates that contain fixed background images on an updated ipad or iphone, the images appear super zoomed in and completely distorted. Using an updated Android based phone or tablet, with similar view port size/s, the images appear without issue except for the fact that the image scrolls instead of remaining fixed which ruins the parallax effect.
When I view other template makers that opt for using javascript based background images/slideshows that use fixed backgrounds, I don't have the same problem. In fact, the images remain fixed instead of scrolling (like their supposed to) and render without any distortion.
Googling around for a bit shows me this has been an issue for many years with ipad and iphone devices. I attempted many suggested work around's, yet I'm still unable to get Apple devices to behave like I hope they would.
Does anyone that uses MDB have some advice for a new person on how to overcome or fix the issue with css fixed background images not showing properly? As a temp work around I've opted to place all images into the html for now. This overcomes the problem for now.
Any advice from others is much appreciated.
Thanks,
Josh
Hello Josh,
First of all, I really appreciate your detailed comment. In MDB we know how important is to create 'mobile first' websites so we will think and try to fix this parallax problem for touch devices. Thank you for the article, for sure it will be very useful for us.
Best,
Marta
Hi Marta,
WoW... Please don't spend any time trying to make this work. It appears this is a huge waste of time.
My research shows parallax on touch devices, via css only (no js to help), is a complete PITA and wasn't really designed with touch devices in mind (from what I can tell). My mistake. I didn't realize this.
Using JS plugins, is usually a must from what I see.
Marta, it would be nice if we could get MDB to sniff this out and deactivate for touch devices or something. It looks like we can do this with media query's, I just don't understand how yet, so I've completely removed parallax type effects from the MDB templates I've tested with.
Here's a great article with some of the best info and demo's I've found that I believe would be useful for your dev staff at MDB.
http://keithclark.co.uk/articles/practical-css-parallax/ <<< personally, I would ditch these effects at MDB as I think they will chew up precious support time. I sell my customers on usability first and build this way as well... glitz, glamour, bells and whistles via CSS and JS come last, and at a price to support if they need debugging.
For now, I'm staying away from parallax. Works great on Desktop's for the most part. The challenge these day's... more and more of my customers are concerned about their content working correctly on phones and tablets, and don't really care much about Desktop views. Hahahahahaha
Desktop's are quickly becoming a thing of the past with each passing year (IMO). "Mobile First" is no joke.
Thanks again for your time Marta,
Josh
Hi Marta,
The info in link you posted, imo, isn't relevant to the issue that I'm referring to. No worries. I'm certain this is an IOS issue on mobile devices.
I'm referring to iphone's and ipad's specifically when:
1> Images are set via css background property and are "FIXED". The "fixed" value (from my understanding) is what helps to create the parallax effect. Yet, at the same time, I believe this is what iphone's/ipad's aren't interpreting correctly (the value of "fixed"). <<< That's my guess.
2> Background images that have a "fixed" value specified are not only completely ignored by iphone's/ipad's (they scroll the image instead), at the same time these devices Zoom in so much on the image, it's completely distorted.
So I guess what I'm asking for is... is there a way to apply the parallax effect that (iphone's/ipad's) will respect using MDB's css?
I understand css background images with a "cover or fixed" value will get cropped and such. This isn't what I'm referring to, and the link you posted is what the op was referring to.
Please don't waste your time spinning your wheels on this Marta. I appreciate your time.
I've seen success using javascript to overcome these issues. I don't know js good enough to implement my own plugin.
Just for reference, this link, (in my testing) has an example of background parallax images appearing and behaving properly on ALL mobile device. It's using the the small Vegas js plugin. And the one shown here, is actually using outdated plugin code and still works like a champ.
http://demo.templateocean.com/wrapbootstrap/zerif-html/v1.3.1/
Josh
Hello Josh,
Answering your question:
1. Once before I answered this question, here is the link: http://mdbootstrap.com/forums/topic/full-image-carousel-background-images-not-responsive/ .
2. Thank you for notice this, we will look at this and fix this issue. We will make 'intros' fully mobile-friendly.
Best,
Marta
Hi Marta,
Thanks for your time. Much appreciated. :-)
Basically "any" of the templates on MDB's site that use a fixed background image to create the cool parallax effect, have issues even on the latest and greatest iPhone/iPads running current IOS and Safari.
Two example templates below. The top header portion of these landing pages below, showcase a fixed background image that create a cool parallax effect when scrolling.
http://mdbootstrap.com/download/templates/bootstrap/free/basic-landing-page/index.html
http://mdbootstrap.com/live/_MDB/index/templates/pro/landingpage-app.html
Two things are happening on iPhones/iPads:
1> The background images are so zoomed in on these devices that you can't make out what the image is. Completely distorted.
2> These devices completely "ignore" the css "fixed" part within the css declaration on the background image. They instead "scroll" the image which would ruin the parallax effect as well.
I would think MDB would want this to work correctly. 90% of my customers use iPhones and iPads.
Thanks again Marta,
Josh
Hello,
I'll try to help you but first could you paste here links to sample templates with this problem? It will be easier to help.
Best,
Marta
