- This topic has 46 replies, 5 voices, and was last updated 3 years ago by
.
-
Posts
-
On MacBook Pro / safari I get exactly the same as above.
on iPhone running ios12 Safari I see:
show on all devices
show on ios
show on iPhone only
that is all…
On an old iPad running iOS 9 I can see:
show on all devices
show on ios
show on iPad only
that is all…
seems like it’s the latest iPad OS that doesn’t recognise .is-iPad, is-iOS
ipad OS safari is supposed to be more ‘desktop’ like than previous versions.
I have an iPad Pro, but it is a couple of years old. But I do run the most re
So, from Safari running on your iPad Pro, open Google. Then enter “what is my user agent” to the search form. When I do that, I get a direct response from Google that lists my user agent. For example, I get
Your user agentMozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:73.0) Gecko/20100101 Firefox/73.0for my iMac desktop. What is the exact string you get if you do this from your iPad Pro?I did some more research, but don’t have the very latest iPad. But, if I understand what I read about iPads, and iOS 13.3, here’s the deal.
Apple seems to want to “unify” Macbooks, iMacs, and iPad Pros. So they’ve changed how Safari works by default. (This may be confined to Safari. Supposedly Firefox and Chrome don’t have the issue). Now, Safari on the iPad behaves like a desktop browser. So the user agent makes the iPad Pro look just like a Mac. There seem to be many many website developers who are very unhappy about this decision as they’ve written web sites that had depended on the ability to distinguish an iPad – just as Weaver Xtreme does.
Apparently, this is because the default for Safari on the iPad now says “desktop browser”. If that is changed in the options (somewhere….) back to just an iPad, then Safari won’t look like a Mac.
I don’t understand why there would be a difference between older iPads and the latest ones as most developers would expect identical behavior on all iDevices in Safari. And this does seem to me to be a very drastic and unconventional change in standards.
If they claim that Safari iPad and Safari Mac will now render exactly the same, then one would hope that would be the same. And it might be.
I guess the differences revolve around how Safari handles bg image scrolling parallax images. But is should be working the same in both.
But apparently there is no method to counteract this decision by Apple.
I just updated to the very latest iOS 1.3.1, (I apparently had 1.3), and the default for Safari has indeed changed to Desktop. Unsetting it restores the old iPad recognition.
So, as I explained in my last post, there is no known solution to this policy.
Screwed we are then 🙂
Thanks for checking it, may be update the documentation in the classes section to let people know it does not work on recent safari browser
just did the user agent thing on iPad Pro:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.5 Safari/605.1.15
looks like it’s acting as though desktop.
what I don’t understand is if safari on iPad OS is acting like a desktop browser, why does it still have the old iOS problem with background-attachment: fixed. Hence causing the parallax background image to be badly scaled. If it’s going to behave like a desktop browser you would hope for better consistency.
at least it can be resolved with media queries.
I agree about that it should behave properly if it is supposed to be a desktop browser!
BUT, good news. After more persistent searching, there is a apparently a way to detect iPads running Safari in desktop mode. It is not likely to be a permanent fix, but hopefully Apple will change the user agent for Safari to distinguish it. The 4.3.3 version of Weaver Xtreme which was just uploaded to WP can now detect Safari when it is running on padOS which then assumes an iPad. This detection is based on not having a touch screen, so as soon as Apple releases a touch screen MacBook, this fix will fail. But it seems to be the best hack available for now.
Weaver Xtreme 4.3.3 also supports new class: .is-pados for use on padOS devices. Apple has recently split iOS (iPhone) and padOS (iPad), so this is part of the issue.
Technically, now Weaver Xtreme will detect the old iOS iPad version (which used iPad in the user agent), and if MacOS is detected, then decides between a desktop and iPad based on the touchscreen detection.
Non-Safari browsers such as Chrome and Firefox still use the old user agent that include iPad in the agent string.
Sounds good.
I updated the theme and added the three rules below
/* Fix parallax on apple mobile devices */
.is-ios .parallax {background-attachment:scroll !important;}
.is-ipad .parallax {background-attachment:scroll !important;}
.is-pados .parallax {background-attachment:scroll !important;}
@thesurge, if you can be so kind as to check the home page below and see if the parallax images are scaled properly on the Ipad Pro, that would be greatYes, that is working, parallax images are now scaled correctly.
@weaver, may be the CSS to unfix parallax backgrounds on Ipad and Ios should be part of the theme (as long as it does not work on these devices)
The current rules do include .is-ios .wvrx-parallax, but without the !important. I don’t know if there are situations where there is .parallax and not .wvrx-parallax.
And the only rule should need to be .is-ios .parallax as the .is-ios will always be generated for .is-ipad and .is-pados.
The problem with adding .is-ios .parallax might be with stuff from Gutenberg. It could possible interfere with rules there as at one point I assumed .parallax might be coming from other plugins, etc., so when Weaver generates parallax, it uses .wvrx-parallax.
@weaver interesting you mention that.
On the site I referenced above, I used Posts and show posts for the parallax areas, and they do not have the wvrx-parallax class, but only a parallax class.
Would that be a mistake that should be corrected?
background-attachment:fixed is the main culprit.
From the home page I have just copied:
#post-2958-p.parallax {
min-height: 400px;
height: auto !important;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url(https://www.nicolatrwst.com/wpnicola/wp-content/uploads/3Paris.jpg);
}The single change below scales the image correctly:
#post-2958-p.parallax {
min-height: 400px;
height: auto !important;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url(https://www.nicolatrwst.com/wpnicola/wp-content/uploads/3Paris.jpg);
}Screenshot below shows how the Paris image compares to the next one which still has bad scaling
- You must be logged in to reply to this topic.