Slide image jitters during fade transition

  • Resolved baobabstrong

    (@baobabstrong)


    2 years, 5 months ago

    I’m testing the free version of Ultimate Responsive Image Slider on slide images that are 950x534px. Whenever it fades from one slide to the next, during a fade transition, the slides are shifted left by a few pixels, and the slide width may be rescaled to several pixels less. This causes the images to jitter at the beginning and end of the fade transition. Very annoying. I’ve tried using fixed custom width & height, and I’ve tried each of the Slide Scale Mode settings (COVER, CONTAIN, EXACT, NONE). Nothing solves the problem. Maybe I’ve not stubbled onto the magic combination of settings that will fix this issue? Does my image width or slider width need to be a multiple of 8 pixels wide, or some other hidden solution?
    NOTE: I expect to use a fixed custom width & height for the slider, otherwise after returning from full-screen mode, the slider position will no longer be correct, on mobile devices. I read that using a fixed sized container fixes that problem. Though, I’ve not yet verified.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author FARAZFRANK

    (@farazfrank)

    I think that’s due to any conflict on your site. Maybe it’s from the current theme or other active plugins. And that problem is only with the first slider on that page, other sliders working perfectly.

    If you check my plugin demo: https://wpfrank.com/demo/ultimate-responsive-image-slider/
    There is no issue on the demo site.

    Is it the Free theme are you using?
    Share me theme name, I will test the plugin for you.

    Thanks

    Thread Starter baobabstrong

    (@baobabstrong)

    I see the same problem on “your” test site, during fade transitions on the large top image. Though not everyone will notice the subtle glitch. You might need to zoom in to see it. How obvious it is may depend on the speed of the fade. I use 500ms. But if you use very fast fades, people might not notice the slides shifting during the transition. It also seems to depend on the width of the slider. I was using a fixed 950px width, but tried other sizes too, and noticed not all widths act the same. Though I found none where the problem completely disappeared. Makes me think it might depend on some magic multiple of 8, 16, or 32 pixels, or something. I even tried a 95×53 “thumbnail” slideshow with 500ms fades. The bug was very obvious on that test. Not sure if other various slider settings can affect the results.

    Thread Starter baobabstrong

    (@baobabstrong)

    I’ve been experiencing fade-shifting problem using the Twenty Twenty-Two theme, WordPress 6.0, and using Gutenberg block builder.

    I don’t see this same fade-jitter problem using other slider plugins. But I’d prefer using Ultimate Responsive Image Slider, if the bugs can be fixed. I particularly like the “full-screen” feature, which beats any “full-page” alternatives. Though, as a separate bug, the slider is often positioned and sized incorrectly when returning from full-screen back the the normal browser page. That’s another “must fix” bug.

    And if you can find some work around to the bugs I’m seeing, please let me know.

    Thread Starter baobabstrong

    (@baobabstrong)

    One other quick note, if it helps you debug this fade-jitter issue… I’ve seen the problem using Chrome and Firefox on a Windows 10 laptop system, and Chrome on an Android phone.

    Thread Starter baobabstrong

    (@baobabstrong)

    I’ve done some more testing to diagnose the Fade-Jitter issue.

    Please checkout my test site..
    https://bstrongplus.com
    I show the fade problem seems to be related to the Slider Width settings. I have more information on my findings there.

    Or for a more simplified version of the above page, go to…
    https://bstrongplus.com/urimagesliderfadejitterminimal

    On those pages the top slideshow has the jitter problem, but the lower slideshow does not (mostly). And the only difference between them is one setting, the Slider Width.

    With those test pages, you can see the problem on a desktop/laptop Windows PC with a Chrome browser using a Zoom level of 100%. With these “particular tests”, I cannot see a problem with either slideshow using the Firefox browser, set to 100% zoom. Though, that’s not always the case. If you go to that older test page again, https://bstrongplus.com/ultimateresponsiveimageslider, you can see a slight jitter problem on “some” of it’s slideshows. Each of those were using different UR Image Slider settings.

    Also, if you use a browser zoom level of 150%, you begin seeing the jitter problem using either Chrome or Firefox on a Windows PC. So, it’s not entirely a Chrome problem. On my Android phone, it’s difficult to see the problem on such a small screen. But viewing that older ultimateresponsiveimageslider page, with the phone turned to landscape mode, and zooming in a bit, I can see the problem does exist on some slideshows, but minimally.

    Hope this info helps you zero in on a cause, with a possible fix. And also, please don’t forget the “slider position bug when exiting Full-Screen mode”. Good luck!

    Plugin Author FARAZFRANK

    (@farazfrank)

    Thanks so much for your detailed feedback.

    We will look into this and try to make to more smooth if possible.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Slide image jitters during fade transition’ is closed to new replies.