Writer’s site refresh

[scrambler]

@thesurge, same here, I posted two answers and they vanished…

 

[scrambler]

@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 class

I 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.

[thesurge]

I 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.

[scrambler]

I meant I added .is-ipad to my scroll rule (not is-ipage as I wrote 🙂 )

[scrambler]

OK, I will speak with @weaver so he can check what is going on with the is-ios and is-ipad class.

@thesurge Can you see if the is-ios class shows up on the iPhone on the body tag?

[scrambler]

@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?

[Nele]

I have the same problem with parallax and iPad. None of the solutions above workes…. Any new idea?

[thesurge]

@Nele

The 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;
}
}

[Nele]

Thank 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 !!

[thesurge]

@Nele

You 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.

[Nele]

I understand! Thank you so much @thesurge!

[scrambler]

This reply has been marked as private.

[Weaver]

I 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;}

[scrambler]

@weaver, have you had a chance to test on Ipad pro as this is the one that supposedly does not work?

@thesurge can you open weaver test site above on an Ipad pro and tell us what it says?

Thanks all

 

[thesurge]

On iPad Pro I can see the following

Show on all devices.
That is all…

[scrambler]

Thank,

@weaver, does that confirm the class is not working on Ipad Pro?

@thesurge, if you have other Mac based devices (mac, iPhone regular ipad), can you also test with them and report what you see for each.

[Author]

Posts