I am trying to: display a slider on my home page
Link to a page where the issue can be seen: hidden link
I expected to see: the slider display as it does without causing content below to shift upwards as each new image loads in the slideshow on a mobile device.
Instead, I got: content below the slider shifting upwards when the images change. This creates an unwanted effect of the content moving up and down each time the image changes.
This is on a development server. The username is demo
password is eb12f216c316
There's no real issue with the user/password being available.
This is even visible on the full page width, at times.
It depends a lot on your ISP speed, and how fast the site loads the assets, cache and others.
On your site there are also some JS warnings, which slow down the whole load time.
The issue happens because when you slide with a fade effect for example, it delays the new content visibility until the end, and that can provoke the jump: http://stackoverflow.com/a/6132918
Although we fixed the problem in past, images need to be preloaded for the fade effect (well, for whatever effect, actually) to work properly, because we need to wait for images to be loaded before we can get and work with sizes.
We have had an erratum for this back in time, which is now solved: https://toolset.com/errata/views-rollover-fade-transition-bumps-content/
I suggest to change the settings of the AJAX slide effect and preload images.
If then the issue persist, this can also be solved very easily by adding a wrapper DIV around your View where you insert it. That wrapper DIV can be activated whenever you want with CSS @media rules, and given a fixed height - which will ensure that on certain screen sizes the View will always live in a fixed height DIV, hence avoiding the annoying jump all together. hidden link
I'm not sure if this is the same thing or not. I adjusted the ajax to load 6 slide images, and that seems to have solved the issue where it has a dramatic shift up and down between slides, but it still jiggles slightly with each slide as the slide comes it, it moves.
I think in this case where you have a vertical slider, the best solution will be to wrap the slider in a div with a fixed pixel height, and use CSS to set that container element to be overflow:hidden. This will tell the browser that it doesn't need to recalculate the vertical position of the content beneath the slider, because the shifting slides will be cropped by the edges of the container element. Then use media query CSS to change the height of that container at different screen widths. Otherwise, as the slider is currently constructed, you may run into this slight repositioning of content beneath the slider during transitions. Something like this in your template:
<div id="no-jiggle-slider">
[wpv-view name="your-slider-view-slug"]
</div>
Then in CSS:
#no-jiggle-slider {
height: 100px;
overflow: hidden;
}
@media screen and (min-width:400px) and (max-width:799px) {
#no-jiggle-slider {
height: 200px;
}
}
@media screen and (min-width:800px) {
#no-jiggle-slider {
height: 240px;
}
}
This is just an example, you may use different width breakpoints or height values.
