Home Forums Weaver Xtreme Theme Parallax shortcode problem (iPad)

Topic Resolution: Resolved
Viewing 16 posts - 1 through 16 (of 31 total)
  • Author
    Posts
  • #50283
    Alexander
    Participant

    My test site is
    https://unixt.consultant.co.ua

    I created one page with parallax shortcode but it works weird on iPad 1. It seems like small parts of image increase in hundreds times.

    Then I created one parallax post and using [show_posts] shortcode place it under parallax one. On desktop there are no differences in general but on iPad it is the 1000% different images.

    I don’t know it works on newer iOS devices or how can I fix it.

    #50285
    Alexander
    Participant

    I created once more parallax with parallax shortcode and [show_posts …] shortcode with same parameters. Parallax shortcode provide higher image and much more zoomed image on iPad 1.

    #50296
    scrambler
    Moderator

    That is because of your mobile rule that changes the image on mobile…

    If you only want to change the image on phones, use .is-phone in the rule instead of .is-mobile

    #50298
    Alexander
    Participant

    In the second parallax I use same image. One with parallax shortcode and other with show_post shortcode.

    [parallax img="http://unixt.consultant.co.ua/wp-content/uploads/2017/07/image-4.jpg" height=250 class="parallax-content"]Поступление[/parallax]
    [show_posts post_ids=453 posts_per_page=1]

    This ones

     

    #50306
    scrambler
    Moderator

    If I reduce the width of the browser until the menu switches to Mobile, I do not see the problem, both image have the same size.

    Can you test by reducing the browser size on desktop and see if you have the problem there too, or if it is only on Ipad.

    Make sure to clear all caches

     

    #50310
    Alexander
    Participant

    There are no problem on desktop. It is only iPad/iPod problem. And it isn’t about a chache. I created second parallax with 2 shortcode. And there is big difference. On iPad the same image but extremely zoomed only [parallax] image. Show_post image is normal.

    #50314
    scrambler
    Moderator

    are you saying that if you shrink a desktop browser to mobile size (600px width), there is no problem?

    If so then have you tested other mobile devices like android tablet, Phone… and do they have the problem

    #50315
    scrambler
    Moderator

    OK, I am seeing a CSS difference hat could explain the issue.


    @weaver
    , is that normal by the way, and should it be corrected?

    the shortcode uses

    {background-position:50% 50%;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-image:url(“//unixt.consultant.co.ua/wp-content/uploads/2017/07/image-4.jpg.pagespeed.ce.ASFCvIYPZK.jpg”)}

    The Show post uses

    {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(//unixt.consultant.co.ua/wp-content/uploads/2017/07/image-4.jpg.pagespeed.ce.ASFCvIYPZK.jpg)}

    SO it is possible the ipad browser is not getting the cover rule.

    Try to add the rule below to the Theme Global CSS Rule box and see if that fixes the problem.

    .parallax-base {-webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;}

    #50316
    Alexander
    Participant

    On desktop if I shrink a desktop browser to mobile size there is no problem.
    I create empty parallax post with parallax image and set only WP Excerpt

    <div class="parallax-content">
    Поступление
    </div>

    Then I use two shortcode to create parallax section, [parallax] and [show_posts]

    [parallax img="http://unixt.consultant.co.ua/wp-content/uploads/2017/07/image-4.jpg" height=250 class="parallax-content"]Поступление[/parallax]
    [show_posts post_ids=453 posts_per_page=1]

    On iPad [show_posts] works fine but [parallax] shows extremely zoomed image. Like I provided before.

    #50317
    Alexander
    Participant

    I added

    .parallax-base {-webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;}

    It doesn’t help. Is it ok if I transform each [parallax] shortcode into post and [show_post] shortcode?

    #50322
    scrambler
    Moderator

    Where did you add the rule, because it is not active and I cant see it anywhere?

    If you removed it, put it back and post back

    It should go in Main Options > Fonts & Custom > Custom CSS Rule box.

    make sure all the CSS in that box has proper syntax so it is not broken (run the content through a CSS validator)

    That said if using show post works you can create all the parallax using that method, but it would be nice to nail what the issue is it you can spare the time 🙂

    #50329
    Alexander
    Participant

    I created new page

    https://unixt.consultant.co.ua/parallax-page/ with content

    [parallax img="http://unixt.consultant.co.ua/wp-content/uploads/2017/07/parallax.jpg" class="parallax-content" height=250]Parallax shortcode - height=250[/parallax]
    <div style="height: 25px;"></div>
    [show_posts post_ids=460 posts_per_page=1]
    <div style="height: 1000px;"></div>
    

    Same image same height=250 but on iPad height bigger and image is extremely zoomed.

    #50339
    Weaver
    Keymaster

    I think the BG CSS used to create parallax images does not get handled properly by iOS. I don’t think there is a known work around.

    #50340
    Alexander
    Participant

    I think iOS plays no role. Because show_post shortcode works fine but parallax shortcode doesn’t.

    #50347
    scrambler
    Moderator

    The only other CSS difference I see is that the shortcode uses height:250px and the show post use min-height:250px (which is the right way to do it)

    I cant see why that would cause the issue, but to test, change the rule I gave you to

    .parallax-base {
    height:auto !important;
    min-height:250px !important;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;}


    @weaver
    , the CSS for the parallax shortcode should be changed from height:xxxpx to  min-height:xxxpx, as a fixed height can cause a responsive problem with content when the browser shrink (we actually had that issue a while back with someone on the forum)

     

    #50353
    scrambler
    Moderator

    I have no way to test on Ipad, and given it does not do it on desktop when we shrink the browser, this is all I can do.

    Just create all your parallax blocks using posts and a page with posts or show_post shortcode

Viewing 16 posts - 1 through 16 (of 31 total)
  • You must be logged in to reply to this topic.