Tell us what you are trying to do? The issue is best illustrated (and exaggerated for your benefit) in an animated GIF of a screencast here: hidden link (it was too big to upload). In words, the issue is that when an image in a slider hasn't loaded, the content beneath it momentarily slides upwards, and is then pushed down when the image does load. Sometimes the slide-up/slide-down doesn't happen or happens very quickly. I think the cause is that when the image has to dynamically load on demand, this issue is revealed.
You can see this behavior yourself on this webpage:
hidden link
Feel free to edit that page for testing purposes.
Hello,
Thanks for the details, since I have your website credentials, it seems to be a CSS problem, I am checking it in your website, will update this thread if there is anything found,
I can see the problem in your website, in case it is a compatibility problem, please check these:
1) Deactivate other plugins and switch to wordpress default theme 2017, and test again
2) If the problem still persists, please provide a database dump file (ZIP file) of your website in below "private detail box", I need to duplicate same problem and debug it in my localhost, thanks.
[This is the second attempt to submit this message.]
Luo, thanks for your response. I deactivated all non-essential / non-required plugins and switched the theme to twentyseventeen. The issue was still visible. See this animated gif: hidden link.
A dump of my database was attached to this message the first time I submitted it, but there's no private field on my second attempt to submit this message. Can you initiate that again?
I'm going to try to investigate ways to stop the on-demand image loading so that all images are loaded when the page loads. It should prevent this problem (at a cost to page size and page load time).
OK, as your request, I have enabled the private message box again
Thanks for the details, I have done below modification in your website:
Edit the view
hidden link
in section "Loop Editor", click CSS Editor, add below CSS codes:
@media screen and (min-width: 1024px) {
div[id^="wpv-view-layout-3775"] img{
min-height:1295px;
}
}
The 3775 is your view's ID, the min-height is the minimal height of image, please test again, check if it is fixed in front-end
Luo,
Thanks for investigating this issue. I examined your solution and found that while it prevented one problem, it caused another: when I resized my browser window, the image, rather than resizing proportionally as it has done in the past, got narrower / squished. While not a likely thing to happen, it's also not desirable.
But I see that CSS can be used in part to tackle this issue and I'll keep searching for a solution. Thank you again!
