Home Forums Showcase Writer’s site refresh

Viewing 15 posts - 33 through 47 (of 47 total)
  • Author
    Posts
  • #63216
    thesurge
    Participant

    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…

    #63217
    thesurge
    Participant

    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.

    #63220
    Weaver
    Keymaster

    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 agent

    Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:73.0) Gecko/20100101 Firefox/73.0
    for my iMac desktop. What is the exact string you get if you do this from your iPad Pro?
    #63222
    Weaver
    Keymaster

    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.

    #63223
    Weaver
    Keymaster

    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.

    #63227
    scrambler
    Moderator

    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

    #63286
    thesurge
    Participant

    @weaver

    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.

    #63289
    Weaver
    Keymaster

    @thesurge, @scrambler,

    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.

    #63294
    scrambler
    Moderator

    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 great

    Moi

    #63295
    thesurge
    Participant

    @scrambler

    Yes, that is working, parallax images are now scaled correctly.

    #63296
    scrambler
    Moderator

    Thank you all 🙂

    #63297
    scrambler
    Moderator

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

    #63299
    Weaver
    Keymaster

    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.

     

    #63300
    scrambler
    Moderator

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

    #62727
    thesurge
    Participant

    @scrambler

    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

Viewing 15 posts - 33 through 47 (of 47 total)
  • You must be logged in to reply to this topic.