- This topic has 9 replies, 2 voices, and was last updated 2 years, 9 months ago by Ying.
-
AuthorPosts
-
June 11, 2021 at 12:09 pm #1819103Ethan
Hi GeneratePress-
I’ve been working on page elements in GP using GenerateBlocks.
My problem is with fixed images not displaying properly on tablets, ie: iPad Pro. Everything looks great in developer modes, however, when I look at it on my iPad the background image doesn’t scroll at all and is displayed with heavy pixelation.
The caveat is: If I switch the background image to “scroll” they will display properly, however, then I lose the obvious cool desktop “fixed background” effect.
Here is a link to the website:
https://testing.customcoatinginnovations.com/Here is a link to how it looks on my iPad:
https://testing.customcoatinginnovations.com/wp-content/uploads/2021/06/IMG_6546.jpgI have searched online and can’t find a solution. Maybe I missed something?
June 11, 2021 at 12:29 pm #1819114YingStaffCustomer SupportHi Ethan,
IOS devices don’t like fixed background images, it’s a known issue.
You can use this CSS to make the background image scroll on narrower screens:
@media (max-width: 1050x) { .gb-container-f9810efd { background-attachment: scroll; } }
Let me know if this helps ๐
June 11, 2021 at 12:40 pm #1819120EthanHi Ying-
I understand that IOS devices don’t like fixed backgrounds and I don’t want them to scroll on IOS devices. What I would like is the image to not display as pixelated on my tablets. It displays fine on my iPhone but not my iPad.
June 11, 2021 at 2:40 pm #1819201YingStaffCustomer SupportI know, when the
ackground-attachment
set toscroll
, the issue should be gone.But I don’t have an iPad to test, I edited the previous CSS so it works on a screen narrower than
1050px
in width, eg. iPad Pro.Meanwhile, I noticed the image is 1.8 MB which will cause a loading speed issue, I would recommend compress it before uploading.
You can use a website tool like this: https://compressjpeg.com/
Let me know how it works.
June 11, 2021 at 6:33 pm #1819292EthanHi Ying-
The code you provided did not help and the image remains pixelated.
As I mentioned from the beginning; I would rather keep the “cool fixed background image” effect on my desktop, and try to find a solution to the background image being pixelated on my iPad, rather than setting all the images to “scroll.”
This is a test site: I have three sizes of this image, resized in Photoshop, and all of them behave the same, pixelated on iPad.
Is there a solution to this problem that I have missed? I have read similar threads about these problems but keep coming up empty handed with answers.
June 11, 2021 at 9:20 pm #1819342YingStaffCustomer SupportThe
scroll
is overriding by thefixed
, try this one instead:@media (max-width: 1050px) { body .gb-container-f9810efd { background-attachment: scroll !important; } }
The CSS won’t affect the
fixed
cool effect on desktop, it only applies to smaller screens like tablets and mobiles.June 12, 2021 at 7:35 am #1819670EthanYes. I tried this previously. I even put that “px” in there in case it made a difference. I’ve also tried adding a background-size element. Nothing has worked.
@media (max-width: 1050px) {
body .gb-container-f9810efd {
background-attachment: scroll !important;
}
}June 12, 2021 at 11:12 am #1819987YingStaffCustomer SupportSorry for the typo, but as I can see the new CSS has not been added on the site yet, could you clear your cache?
If still doesn’t work, could you disable the cache plugin after clearing the cache? Thanks!
https://www.screencast.com/t/bi8N59BZDJune 13, 2021 at 1:32 pm #1820890EthanYing-
This is great. I added the CSS back in, cleared the cache and disabled the WP-Fastest Cache plugin. Everything is displaying properly, on all devices, even after re-enabling the plugin. I will let you know if any more problems persist.
This is the code that worked:
@media (max-width: 1050px) {
body .gb-container-f9810efd {
background-attachment: scroll !important;
}
}I really appreciate the suggestion. In the end, I’m not surprised that the WP-FC plugin is the culprit. This is a turning point as I try and design more with GeneratePress elements & GenerateBlocks and less with bloated page builders such as Elementor. Thank you for the help!
June 14, 2021 at 11:10 am #1821968YingStaffCustomer SupportGlad to hear that and you are welcome ๐
-
AuthorPosts
- You must be logged in to reply to this topic.