Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Background image not displayed correctly on iPad

Featured Lock Resolved
Hi there,
I have set a background image for a certain row with the Pagebuilder 3. For some reasons this image is not shown correctly in iPads. Its completely zoomed and you cannot see anything from the picture.

Here are my settings:

https://screenshots.firefox.com/gwVO7J0GfzacUzVg/kares-webdesign.de

I have made a screenshot, see

20180516_221421-1.jpg

Best regards,
kweb

Attachments (1)

  • 20180516_221421-1.jpg
    20180516_221421-1.jpg 43.7 KB

20 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
thanks/danke for real photo, I think we will be able to correct this.

1) Make copy of that Row
2) Inside original Row in Responsive settings Click to Hide on Tablet and Mobile
3) Inside Copy of that Row - click Hidden on desktop YES
4) Inside Copy of Row - change value of "Background Size" option - check different settings, which is the best for your device. Cover - is not as you noticed.
----

If I had your site URL, we can do it in two lines of custom CSS as well.

kweb

More than a month ago #Permalink
Hi Paul, did exactly what you said - no results on my iPad. I send you login credits.

kweb

Paul Frankowski - Staff

More than a month ago #Permalink
Remember to refresh browser 2x or 3x, Mobile Safari doesn't have clear cache option.

Thanks, I will check your admin area now.

kweb

More than a month ago #Permalink
Hi, yes I have reloaded the browser some times - still same result.

Paul Frankowski - Staff

More than a month ago #Permalink
In general it's background-attachment:fixed - is not used by mobile safari. Nobody knows why.
---
I used custom CSS code in Page settings, please refresh your iPad browser 3x and check

Attachments (1)

  • ipad-MINI.png
    ipad-MINI.png 308.8 KB

Paul Frankowski - Staff

More than a month ago #Permalink
It has to be difference !!! No joke.

kweb

More than a month ago #Permalink
Haha - Safari is full of suprises - would have never found a solution for that one. I think now I have to implement this fix on my over 25 Pagebuilder sites. Thanks for your help.

SonicShock

More than a month ago #Permalink
Good solution to a problem I was having as well, thank you. Obvious in hindsight, but I didn't think of it.

SonicShock

More than a month ago #Permalink
Paul, I'm still having problems with the iPad. Having two rows - one for laptops/desktop, one for tablets and iphones, works perfectly in the phone, but the ipad a) doesn't display the row it's supposed to, and b) leaves a row gap equivalent to the padded width of the laptop. Have even tried having three versions, one specifically for a tablet, but same result.
I'm also getting different results. One page that has been worked a bit shows some coloring in these rows - I suspect a small part of the picture blown up. But attempting this on a fresh page simply produces a gap on the tablet. Clear as mud I'm sure, but if you have any additional thoughts....

Paul Frankowski - Staff

More than a month ago #Permalink
1) What type of iPad you have , Classic or Mini ?
2) What screen resolution?
3) On which view horizontal or vertical you have the problem?

I have to know that to deliver custom solution.

SonicShock

More than a month ago #Permalink
Paul, I apologize for the late reply. The problem was in different iPad vintages, both landscape and horizontal, BUT, I believe the issue might have been some corruption at my end as I can't consistently replicate the issue. Don't know if I was tired or... In any case, I wouldn't ask you for a custom solution; I'll work with what comes out of the box: it's standard, replicable, and easier to support.

Unrelated to this issue, but since I'm here, the latest version (3.2) released to day...in-line editing was a surprise gift. Seems a small thing, but it'll be a huge productivity boost. Thank you to all the team.

Paul Frankowski - Staff

More than a month ago #Permalink
maybe it was cache problem, happens from time to time, and Mobile Safari browser doesn't have clear cache button :(
-----
thanks.

Yianna

More than a month ago #Permalink
Hello I am struggling with the same problem. I have some background images to my demo website which are using Background Attachment Fixed.

I thought of making two rows: one for desktops with attachment fixed and one for mobiles and tablets with attachment scroll. However the Ipad Pro and some other tablets, seem to be considered as desktops (due to same resolutions?).
So there is a bug there at sp page builder where at the responsive tab of the row options, the option "hidden on tablet" is not working correctly.

Anyway, I am trying to fix this with custom page code using media queries with min-device-width and max-device-width but with no luck, at least at the online simulators. I don't have an ipad unfortunately but my client sent me some screenshots that led me to the "attachment fix" problem in safari.

can you help please?

Paul Frankowski - Staff

More than a month ago #Permalink
IPad have also Safari, in that case you have to disable Background Attachment Fixed by custom css.

Read about "@media only screen ..." here:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

and about how to check which ID you have to override
https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action

Yianna

More than a month ago #Permalink
IPad have also Safari, in that case you have to disable Background Attachment Fixed by custom css.

Read about "@media only screen ..." here:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

and about how to check which ID you have to override
https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action


Thank you for your reply, that is what I finally did with custom css, however, it would be convenient not to have to use custom css but to be able to create different rows using the pagebuilder's feature "hide for desktop", "hide for tablets" and "hide for mobiles".
So the row that would be hidden in desktops and mobiles (so shown in tablets) would have the background attachment as scroll.
But as I said, I tried that and the row which is supposed to be for tablets does not include IPAD air (and some other tablets with very high resolutions). Testing shows, that ipad air falls into the category of desktops. So this is a bug because pagebuilder is not distinguishing desktops and tablets correctly.

Paul Frankowski - Staff

More than a month ago #Permalink
I added such a request into our dashboard.
But you You must admit to me that Safari is "weird" all browsers support Background Attachment Fixed,
and Apple said NO, we don't.

Paul Frankowski - Staff

More than a month ago #Permalink
About breakpoints, SPPB was built in times of Bootstrap 3. Since few months we have stable Bootstrap 4, but Joomla core doesn't support this, so we have to wait till Joomla 4.x to use wider spectrum of Responsive breakpoints and other new responsive features from BT4.

---
Beside number of types on smartphones, tables now is madness.
Website scripts, tools can not keep up with these changes.
Building websites is expensive, you have to use at least 6 devices (Android, iOS) to test website.

Wiebe

More than a month ago #Permalink
In general it's background-attachment:fixed - is not used by mobile safari. Nobody knows why.
---
I used custom CSS code in Page settings, please refresh your iPad browser 3x and check


I got the same issue, on Ipad and iPhone the images aren't resizing. Can you tell me what custom CSS code you used, so I can try on my clients website also?

carpenterwd

More than a month ago #Permalink
I am having this same issue. Can you please share what code you added and where so that I can resolve the problem on my client's site?

Paul Frankowski - Staff

More than a month ago #Permalink
There is no official fix - on the internet you can find only hacks, the only way is not to use background fixed.

Or create a separate row for desktop with it,
and without for tablet and mobile.


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 105
Sifat

Sifat

Total Accepted Answers: 104
Toufiq

Toufiq

Total Accepted Answers: 36
Pavel

Pavel

Total Accepted Answers: 4
J

johnny

Total Accepted Answers: 3

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us