- This topic has 46 replies, 5 voices, and was last updated 3 years ago by
.
-
Posts
-
One of my relative writer’s website was in a badly need a a refresh, so here it is
Nothing Fancy, but let me know if anything bugs you or if you see any issues 🙂
Cheers
Known issues:
- The munchies featured images were originally small so eventually I would need to redo them in higher res…
- The excerpt transition on hover for the munchies excerpt does not work on MS Edge because of a Bug on Edge that does not work when using Calc values (which are needed for proper positioning)
I am guessing that you used the parallax shortcode for the home page sections?
It looks good on desktop but unfortunately doesn’t work so well on iPad. I have encountered this a few times, I can’t remember exactly without checking but its something to do with the way iOS Safari handles the ‘cover’ property which causes the background images to scale to the full height of the page, hence you see an enlarged, pixelated area of the image.
This is specific to the shortcode, using the parallax posts method works as expected.
In the past I have used CSS to swap the images and tidy up the iOS views, I think there is a post on this forum where I mentioned this.
Thank @thesurge
I actually used Weaver slider posts and a show post shortcode for the parallax image, but that should be the same as using the parallax shortcode now .
Parallax uses fixed background images that cover the entire browser area, and that is not supported on most mobile devices (why that has been for years now eludes me…)
So on mobile devices, the background will usually be like a regular image.
On the Ipad, are you seeing a regular image scrolling up, or are you seeing a parallax fixed image but with bad scaling?
And I am surprised by your remark that Parallax post normally works but not the shortcode, as I think weaver fixed the few CSS differences there was between the two.
May be you can take a screenshot of what you see on the Ipad.
If anyone else can test on Apple devices (Mac OS and IOS) I would appreciate it as I have no access to these devices…
MS Edge does have a simulation mode and it seems to work in there, but I cant really trust that.
On iPad I see the background images with bad scaling, screenshots below.
Interestingly a website I built a while ago (http://pinkertonclassiccycles.co.uk) using a similar method as you – parallax posts via a weaver show posts filter, used to work well on iPad, after just checking it now I find it no longer works as it used to, is this due to the CSS changes?
So the problem is that in iOS Safari, Weaver parallax posts or parallax shortcode display with an enlarged, badly scaled background image.
This previous post discusses the problem. https://forum.weavertheme.com/forums/topic/parallax-shortcode-problem-ipad/
On iPad there is no parallax effect, the image scrolls with the page, like a regular background image – just with bad scaling.
@thesurge I added the rule below to change the background from fixed to scroll on ios as normally it is the fixed that causes issue there.
.is-ios .parallax {background-attachment:scroll !important;}
Let me know if that fixes the scaling issue.
Thanks
Hugues
That doesn’t seem to do anything.
background-attachment:scroll is already the current behaviour on iPad.
I think background-size: cover could be the issue.
I don’t have time to test it out at the moment but the below CSS has worked in the past.
/*iPad Pro */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) {
.parallax-base {
background-position: 50% 62%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: 100%;
}
}
/*iPad*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.parallax-base {
background-position: 52% 70%;
-webkit-background-size: auto;
-moz-background-size: auto;
background-size: auto;
}
}
@media (max-width: 767px) {
.parallax-base {
background-position: 52% 42%;
-webkit-background-size: auto;
-moz-background-size: auto;
background-size: auto;
}
}
Using any of the unit will create a dependency on the image ratio and screen ratio.
A solution that would ensure full coverage no matter what would be using vmax in the same proportion as the image ratio
for example for images with a 16:9 ratio (ie: 1920px wide by 1080px high) the rule would be
.is-ios .parallax {background size: 178vmax 100vmax !important;}For a square image you would use 100vmax 100vmax
Using 100% or auto could result in blank space depending on the screen ratio versus image ration vs image position.
That can be minimized by differentiating rules (kind of what you did) or images (like explain in the article below) for portrait devices and landscape deviceNow if using a landscape image (like I do with 1080p) using auto 100% is another possible compromise.
You would only risk to see some white space on the side if the ratio of the screen is larger than the one of the image
like 3:1 for 2:1 images, but that will not be the case on the ipad.So I made two test pages:
One using Vmax to test if it works on ipad
One with auto 100%
Right now the rules are set to apply to all, based on the result, I will test to apply them only on ios with the is-ios class
@thesurge Thank you if you can have a look and let me know what you see on ipad with these 🙂Firstly, I tested on iPhone, both tests work quite well, of the two the auto 100% method has slightly better image placement, but the Vmax method could probably be tweaked for improvement too.
On iPad neither work correctly without some adjustment.
Vmax method:
Images are not visible as they are positioned outside of the containing div.
Changing to background-attachment: scroll; resolves that, also adjusting background-position: 50% 50%; to other values can be used to fine tune the position.
Auto 100% Method:
Images are still badly scaled. Again changing to background-attachment: scroll; resolves that.
Removing 100% from background size, so it becomes  background-size: auto !important; is also required to scale correctly, then background-position can also be used as above to fine tune position.
It seems that the only way it will work is if the parallax image is treated as a standard background image on iPad.
background-attachment: fixed – does not work
background-size: cover, background-size: 100%, background-size: auto – all seem to be workable as long as background-attachment: scroll is used.
Thank you for the report @thesurge
Two things
1- You say that Vmax and auto 100% only work on the Ipad if you change the background-attachment to Scroll, but I have a rule
.is-ios .parallax {background-attachment:scroll !important;}
That is supposed to do that on Ios, so on iPad what you should be seeing is attachment scroll and the size (vmax or auto 100%).
From what you are saying, it seems .is-ios is not working for ipad.
Given there is also a class .is-ipad, I have changed the rule to
.is-ios .parallax, .is-ipad .parallax {background-attachment:scroll !important;}
To see if that makes a difference.
2- Do you actually have a way to see if the is-ios / is-ipad rule is active? Do you have a way to see if the classes appear on the body tag?
I appreciate you help on this
We cross posted so you need to check my revised post above your last one.
But from your last post, it definitely looks like the .is-ios rule is not working.
If you can check my revised post above and check if adding a rule with the is-ipad class worked.
Also if you can actually inspect the body tag on ipad, it would be interesting to check if the classes (is-ios and is-ipad) are on the body tag.
Right now with the rule I have, if either is-ios or is-ipad work, the Home page should be displaying with attachment scroll and size cover, which should in fact work based on your test. Let me know if it does.
Apreciate the help as usual
I also posted one and it vanished too….
My last post was telling you to check my last posts as I had changed it wile you posted yours.
I get the feeling the is-ios class is not working on ipad, so I added is-ipad, may be you can check if these classes appear on the body tag on ipad, and if they do, let me know if the home page now works as it is set to use scroll (set with is-ipad) and cover
- You must be logged in to reply to this topic.