- This topic has 46 replies, 5 voices, and was last updated 3 years, 3 months ago by
scrambler.
-
AuthorPosts
-
January 10, 2020 at 17:43 UTC - Views: 60 #62735January 10, 2020 at 17:47 UTC - Views: 63 #62736
scrambler
Moderator@the surge
From the test you made it looks like the .is-ios class is not working on ipad, because my home page was set to Scroll and cover using the .is-ios classI have added a scroll rule using the .is-ipage class to see if that works.Right now if the class work, the home page should be displaying with scroll and cover on ipad which yoru test say it should work.Let me know if it does, and if not let me know if you have a way to see if the classes (is-ios and is-ipad) are present on the body tag.FYI, I think that editing the post may be what makes it vanish, so don’t edit your post.January 10, 2020 at 17:48 UTC - Views: 56 #62737thesurge
ParticipantI can’t see either is-iOS or is-iPad on the body tag. It is an iPad Pro I am using so thinking there have been changes in iPad OS that are stopping it from working.
on the plus side the home page is looking much better on iPhone now.
January 10, 2020 at 17:49 UTC - Views: 55 #62738scrambler
ModeratorI meant I added .is-ipad to my scroll rule (not is-ipage as I wrote 🙂 )
January 10, 2020 at 17:50 UTC - Views: 62 #62739scrambler
ModeratorJanuary 10, 2020 at 17:51 UTC - Views: 60 #62740scrambler
Moderator@weaver, from the test we have been making, it seems like the is-ios or is-ipad classes do not show up on an ipad pro.
Can you recheck iPhone, Ipad and Ipad pro and is some do not get the classes, is that something you can fix?
January 30, 2020 at 13:46 UTC - Views: 40 #62867Nele
ParticipantI have the same problem with parallax and iPad. None of the solutions above workes…. Any new idea?
January 30, 2020 at 13:53 UTC - Views: 42 #62868thesurge
ParticipantThe below is currently working for me, on 2 websites.
Added to Global CSS
/*iPad Pro */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll !important;
}
}/*iPad*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.parallax {
background-attachment: scroll !important;
}
}January 30, 2020 at 14:05 UTC - Views: 39 #62869Nele
ParticipantThank you @thesurge! Now, the images show up in the correct size, but it hat lost the parallax effect on the iPad. But having the image in a correct size instead of an enlargement of a section is a nice progress !!
January 30, 2020 at 14:13 UTC - Views: 45 #62870thesurge
ParticipantYou won’t get the parallax effect to work successfully on iPad, due to iOS Safari refusing to work correctly with ‘background-attachment: fixed’.
This is a simple compromise. With a bit of extra CSS you can adjust the size and position of the images if you need to.
There are other JS based parallax effects that work on iOS, usually found with plugins such as elementor and site origin page builders.
January 30, 2020 at 14:17 UTC - Views: 30 #62871February 21, 2020 at 01:00 UTC - Views: 30 #63189This reply has been marked as private.February 22, 2020 at 19:24 UTC - Views: 26 #63212Weaver
KeymasterI tested .is-ios, .is-iphone, and .is-ipad, and all three classes are working as expected on my test site.
To check this out, goto https://test.weavertheme.com/active-tests/test-ios/
The test strings use a class .show-ios, .show-iphone, etc, and the following CSS to implement:
.show-ios {display:none;}
.show-iphone{display:none;}
.show-ipad{display:none;}
.is-ios .show-ios{display:block;}
.is-iphone .show-iphone{display:block;}
.is-ipad .show-ipad{display:block;}February 22, 2020 at 20:32 UTC - Views: 16 #63213scrambler
ModeratorFebruary 22, 2020 at 21:28 UTC - Views: 16 #63214thesurge
ParticipantOn iPad Pro I can see the following
Show on all devices.
That is all…February 22, 2020 at 21:40 UTC - Views: 13 #63215 -
AuthorPosts
- You must be logged in to reply to this topic.