Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • September 28, 2018 at 11:54 am #1015711
    vgsystems

    Hi,

    We detected a problem with timeline enfold plugin/feature. It’s working well on all devices except iPad. I can reproduce the problem in Chrome’s emulator and in a real iPad.

    You can checkit on https://ensaladaseo.com/, if you load the site with a desktop browser, all works great, but if you load it on iPad or with Chrome’s iPad emulator, the icons seams to be hang and they doesn’t show properly.

    Best regards

    September 28, 2018 at 7:08 pm #1015852
    Victoria

    Hey vgsystems,

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    September 28, 2018 at 8:24 pm #1015889
    vgsystems

    Hi Victoria,

    I attached two screenshots, one with the error and another with the correct way. I noticed that the screen resolution doesn’t take effect, you can put the same resolution than iPad on Chrome’s emulator and the behaviour will be correct, but if you use a real iPad or select iPad on Chrome’s emulator, the problem appears.

    Wrong screenshot: https://imgur.com/a/EduC7lt
    Correct screenshot: https://imgur.com/a/bGcsRVn

    Take into account that I’m talking about timeline plugin of Enfold theme.

    Best regards

    September 29, 2018 at 8:24 pm #1016164
    Victoria

    Hi vgsystems,

    Thank you for clarifying, it is supposed to fade in but animation does not fire.

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    October 1, 2018 at 9:50 am #1016492
    vgsystems

    Hi Victoria,

    I can’t give you access to our website, I’m so sorry about that. I can give you screenshots or whatever you want, but no access.

    Also, we noticed that the problem appears in other installations with the last Enfold version too.

    Awaiting your news,
    Best regards

    October 2, 2018 at 12:23 pm #1017011
    Victoria

    Hi vgsystems,

    Ok, please try adding this code:

    
@media only screen and (min-width:768px) and (max-width: 1024px) {
    .avia_transform .avia_start_delayed_animation {
        -webkit-animation: avia-fadein 1.5s 1 ease-out;
        animation: avia-fadein 1.5s 1 ease-out;
        opacity: 1;
    }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    October 2, 2018 at 3:32 pm #1017105
    vgsystems

    Hi Victoria,

    I checked your solution in our development environment and it isn’t worked.

    We think that the problem it isn’t related with screen resolution, it’s related with device recognition javascript system.

    Best regards

    October 2, 2018 at 4:05 pm #1017131
    Victoria

    Hi vgsystems,

    Please try the code like this

    
@media only screen and (min-width:768px) and (max-width: 1024px) {
    .avia_transform .avia_start_delayed_animation {
        opacity: 1 !important;
    }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    October 2, 2018 at 5:42 pm #1017163
    vgsystems

    Hi Victoria,

    It doesn’t work.

    The css class avia_start_delayed_animation is removed on iPad in shortcodes.js file, line 442.
    It seams to be a javascript problem…

    Best regards

    October 4, 2018 at 6:55 am #1017714
    Ismael

    Hi,

    Try to set the opacity and scale of the timeline icons directly.

    .responsive #top .avia-timeline-vertical .milestone_icon {
    transform: scale(1);
    opacity: 1;
}

    Best regards,
    Ismael

    October 4, 2018 at 3:45 pm #1017945
    vgsystems

    Hi Ismael,

    Your change make that the icons appears but without any effect. Also, there lines that connect icons themselves doesn’t appear.

    It’s possible that the timeline JS effects work on iPad and the connecting lines were visible?

    Best regards

    October 8, 2018 at 2:46 pm #1018990
    Nikko

    Hi vgsystems,

    I tried to check this page in the demo: https://kriesi.at/themes/enfold-2017/elements/icon-list/ and it works fine.
    Can you try to disable all plugins and switch to Enfold parent theme and check if it works properly?

    Best regards,
    Nikko

    October 8, 2018 at 4:08 pm #1019031
    vgsystems

    Hi Nikko,

    I did it before write you and the result is the same. We are using enfold child theme.

    In your demo all works Ok because you are not using responsive capabilities. If you turn on the mobile responsive function, you can reproduce it.

    Best regards

    October 9, 2018 at 9:42 am #1019400
    Nikko

    Hi vgsystems,

    What do you mean by “using responsive capabilities”? I did check it with ipad and not web inspector.
    You may try to use this css code to fix it on ipad:

    @media only screen and (min-width:768px) and (max-width: 1024px) {
  .responsive #top .avia-timeline-vertical .milestone_icon, 
  .responsive #top .avia-timeline-vertical .av-milestone-indicator, 
  .responsive #top .avia-timeline-vertical .av-milestone-icon-wrap:after {
    opacity: 1;
    transform: scale(1);
  }
}

    Best regards,
    Nikko

    May 21, 2019 at 7:02 pm #1103033
    Guenni007

    maybe we use that class on html (avia_mobile) to only loose that nice animation on ipad and not on small screens:

    @media only screen and (min-width:768px) and (max-width: 1024px) {
  .responsive.avia_mobile #top .avia-timeline-vertical .milestone_icon, 
  .responsive.avia_mobile #top .avia-timeline-vertical .av-milestone-indicator, 
  .responsive.avia_mobile #top .avia-timeline-vertical .av-milestone-icon-wrap:after {
    opacity: 1;
    transform: scale(1);
  }
}
  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.