Home Forums Weaver Xtreme Theme Parallax posts and iOS

Topic Resolution: Investigating

This topic contains 4 replies, has 3 voices, and was last updated by  thesurge 1 week, 2 days ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #47536

    GoScoutUK
    Participant

    I know this has been asked and answered before, but has any progress been made with making parallax posts work on safari?

    I’ve just built a new site for myself (https://www.guy-singer.com/) using “Page with posts” template to allow me to colour post backgrounds easily. The two parallax posts work beautifully on most browsers, but a friend just showed me his iPad and the pictures are not at all pretty – they are fixed and the part of the photo that has been used is not the best. I’m faced with the choice of taking the parallax out or putting up with substandard views on iPads.

    So, either is there some nice code get around this, or alternatively is there any coding to say [hide_if_safari] [show_if_safari] so I can make alternate arrangements?

    I have searched the previous posts, and if I have missed a previous answer I apologise. Thanks for your time,

    Guy

    #47541

    Weaver
    Keymaster

    To start, this is an iOS issue, and not Safari.

    iOS still does not support the kind of BG image used to get parallax.

    However, we do believe that iOS degrades “gracefully” – it doesn’t crash or anything, it just shows a fixed image as the bg.

    There seems to be just one possible workaround that depends on the exact method used to specify the parallax bg image.

    Weaver Xtreme supports a general class called .is-ios that will be enabled if the device being used is an iOS device.

    On your site, the first parallax image is defined in the html output as:

    <section class='parallax-base wvrx-fullwidth custom-class' style='background-image:url(https://www.guy-singer.com/wp-content/uploads/2017/03/detective.jpg); height:500px;'>

    I think you might be able to “fix” the image by playing with its height. I haven’t tried these, but this might be starting point:

    .is-ios .parallax-base {height: 50px !important;}

    Add that to the Custom CSS optins in the Legacy or Customizer interface.

    You could try different values for the height – different fixed value, or maybe even percent values. I don’t think you could specify a different background-image url since that is in a style= which can’t be overridden by CSS.

     

    I haven’t tried this, partly because it is hard to live-debug on an iPad.

     

    #47549

    GoScoutUK
    Participant

    Thanks for this, Weaver. I will try when I’m with my iPad owning friend. I specified the parallax panel using [parallax img='https://www.guy-singer.com/wp-content/uploads/2017/03/detective.jpg' height=500 class='custom-class']Author of
    New Adult Novels[/parallax]

    In the body of the post itself. I find this is much easier than using the pre-built parallax function – maybe I’m just lazy – but this is the way I best remember to do it.

    I might try using

    .is-ios .parallax-base {height: 0px !important;}
    
    

    and see if that works. Thanks so much for your time and update.

    Guy

    #47552

    GoScoutUK
    Participant

    OK – I can report a success! Using the “0” height has removed the picture from ios and so stopped it mashing the parallax. Thanks for that. While not the perfect solution, it’s far better than it was.

    On a separate note, nothing to do with weaver, but maybe of interest, I found that Safari is no longer supported on Windows. The last update was about three years ago and it is no longer considered secure. Shows how out of date I am!

    Thanks for the help

    Guy

    #47555

    thesurge
    Participant

    Interestingly I have found that if adding parallax posts to a page using the weaver show posts method it seems to degrade pretty well on iOS, giving well placed and sized images. However if using the parallax shortcode then it does not, the images are scaled up far too much.

    The parallax shortcode sometimes requires custom CSS for various iOS screen sizes, for example this site I am currently designing requires the following CSS to make the parallax shortcode on the home page look good across all devices:

    /*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;
    }
    }

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.