Helix Ultimate / SPPB Display Images Differently On IPhones And Androids
Francois Barnard
Hi, I tried to see if anyone else experienced the same problem and found this thread: https://www.joomshaper.com/forum/question/20380
However, enabling or disabling Lazy Load makes no difference for me. I have a new website which displays terribly poor on my iPhone 13 Mini. On the Samsung Android used by family members it looks wonderful. At first, I ascribed it to my tiny iPhone 13 Mini's screen, but now other users with iPhone 16/16Pro phone complain about the same problem.
I have a background in a row set to "Fluid" which displays perfectly on computer/tablet/Android mobile, but terribly on iPhone mobiles. I changed the "Lazy Load" setting in the Helix Ultimate template but it made no difference.
I am using:
- Joomla 6.0.1
- SPPB 6.1.2
- Helix Ultimate 2.2.2
Has anyone else had the same problem? Any ideas?
The website is at https://cci.ac.za
Regards,
Paul Frankowski
Accepted AnswerSolution for BG Images:
Is/Was in SPPB documenation: https://www.joomshaper.com/documentation/sp-page-builder/troubleshooting#background-image-in-section-is-resized-on-safari-mobile-browser
Francois Barnard
Accepted AnswerHi
I tried a workaround now, because I cannot wait any longer. The website owner is already marketing and the traffic is picking up on the site. However, theproblem that iPhone and Android react differently on the Helix Ultimate template remains a significant problem which needs attention.
Kind Regards,
Francois Barnard
Paul Frankowski
Accepted AnswerHi Francois ,
Do you talk about background images? If yes, it's a very "old" and popular Safari browser issue. WordPress developers have exaclty the same problem. Check 5-6 years old topics on Apple forum . So this is not a problem with device, but default mobile browser. In Firefox, Opera, Chrome even on iPhone 17 will be OK.
When background image has both : background-attachment: fixed; and background-size: cover; Safari gets crazy and don't listen CSS rules making bg image horrible !
We even informed about that in editor since SPPB 3.8 and 5.x & 6.x (under "?" icon) and in documenation - but how many people read that? :/
Francois Barnard
Accepted AnswerDear Paul
Thank you so much for your rapid response. The problem is not only on Safari, but on Chrome too. I hardly eve use Safari on my iPhone, but use Chrome every day. My iPhone has been updated to the latest and greatest of iOS versions (iOS 26.1), so my Safari should be the latest too. As for Chrome - as you know - it updates itself from time to time and should be on the latest version too.
My workaround was to create rows for mobile only, and exclude the regular rows for mobile devices. I "contained" the image and maniplated the height until it was acceptable. I then tested it on an iPhone 13 Mini, iPhone 16, iPhone 16Pro, Samsung Galaxy Pro 22, Samsung Galaxy Pro 24, Xiaomi 15, Fairphone, and Huawei.
The disappointment comes in that a "crazy old" problem has now forced me to change a website displaying beautifully on computers, tablets, and Android phones to a website now being mediocre on Androids and iPhones. It took a lot of extra time and effort just to have a mediocre result, and losing time means losing money. I am disappointed that this old problem could not have been resolved to where every device displayed the images as expected.
I am thankful, however, that I can now put it behind me.
Once again, thank you for your response, and have a lovely December!
Kind Regards,
Francois Barnard