On two sites I have been working with Salient (14.0.3 / Chrome / MacOS), I have encountered the same issue which is giving me a really hard time and makes the theme almost unusable for, even though generally for the most part the theme works fine.
I'll explain the problem based on the site I currently work on.
The situation:
Columns can have "entrance animations" which define when a column becomes visible during scrolling. There is usually an "animation offset" defaulting at 95% of screen height when an element will become visible. The same entrance effect applies to images: they are initially invisible and then appear with a "fade in" effect (this seems not customizable but appears to be a "built-in effect" from Salient). Or split headings: they will have a moment during scrolling when the animation triggers and the headline fades in. All of the default animation offsets are usually reasonably set up and work well.
So far, so good!
The problem:
There are situations in which this animation offset doesn't trigger when it should (e.g. the default at 95% of screen height for columns), but only at a "later" point (further "above"). With very long pages, what I am observing, is that the further I scroll down, the later elements+images will appear on the screen.
First, they appear right at the bottom of the screen when you scroll. As expected. Then, as you scroll down further, the next elements appear maybe at 2/3 of the screen. Then only at 50%. Then 25%. And eventually, almost all of the screen remains empty, even though the elements should have faded in long time. So the user simply doesn't see anything, until only in the "very last moment" basically.
With pages that aren't too long, this can be worked around by modifying the offset to some artificial value, e.g. 150% instead of 95% -- note, that in this case, the elements still only appear when in-screen. But if you have a REALLY long page, like 7-15 screen heights, it becomes absurd and unmaintainable. The longer the page, the more "off" the offset is (no pun intended ;)).
The only solution then seems to be to turn off ANY animations, not use image fade-ins, and not use split headings -- or basically anything which seems to be "triggered" at those animation offsets.
Because the problem also effects animations within Global Sections, the animations have to also be turned off in Global Sections, so it is not possible to manually fix ("work around") only a single long page where the problem occurs.
It seems that the "measurement" of the offset can break depending on the length or type of content on your page, which is unknown to me.
Expected:
All entrance animations and scroll effects should occur at the scroll position they are set up too.
(This is the public site, here the effect is still somewhat moderate. In the unpublished private version where I have added 6 more speaker rows, the effect is also much more apparent, so it seems that the problem grows based on the number of rows/columns/images somehow. )
Please note as you scroll down how the headlines "Weitere Folgen..." or "Zum Programm" appear really late, if you scroll slowly from the top. Note that the problem is also less severe if you reload the page at the already scrolled down lower position.
I would very much appreciate any comment on how it can be fixed/worked-around.
The issue is occurring in your setup due to the lazy loading option being active in combination with your images that are not provided at a large enough size to fill the column that they live in.
When images are lazy loaded, there is no data available about the final size of the image other than the aspect ratio. We use that aspect ratio relative to the available space in the parent column to calculate a temporary width/height for the image prior to it being loaded in (when it is scrolled into view). In your page, when viewed on a display large enough, the images are smaller than the parent column so that logic isn't 100% accurate and the estimated height of your images is calculated larger than it needs to be. This then messes with the offset calculations of the animations. You can see the excess space in the below screenshot, which will ultimately be added to the height of the image as well:
The more images that this occurs on, the more the offset will calculate wrong down the page, and the larger the monitor, the larger the differences will be. It seems all of your images are provided at the same 546 x 546 dimensions, so the problem should compound in a linear fashion, at least on the provided page URL.
--
You can correct it in a few ways. Some quick ways to fix it would be to
Disable the lazy loading option. If you're not setting it active on each image explicitly, it's probably enabled in the Salient options panel > general settings > performance tab.
If you'd like to keep the lazy loading on, you could use a CSS snippet to specify a max width on your images to correct those estimated calculations:
Add the following snippet into the custom CSS box located in the Salient options panel > General Settings > CSS/Script related tab:
Outside of those quick fixes, you could also correct the problem by providing larger images which will be able to fill the column that they are in. You can still keep the excess spacing on the left/right by adding column padding to the sides using the column settings.
On two sites I have been working with Salient (14.0.3 / Chrome / MacOS), I have encountered the same issue which is giving me a really hard time and makes the theme almost unusable for, even though generally for the most part the theme works fine.
I'll explain the problem based on the site I currently work on.
The situation:
Columns can have "entrance animations" which define when a column becomes visible during scrolling. There is usually an "animation offset" defaulting at 95% of screen height when an element will become visible. The same entrance effect applies to images: they are initially invisible and then appear with a "fade in" effect (this seems not customizable but appears to be a "built-in effect" from Salient). Or split headings: they will have a moment during scrolling when the animation triggers and the headline fades in. All of the default animation offsets are usually reasonably set up and work well.
So far, so good!
The problem:
There are situations in which this animation offset doesn't trigger when it should (e.g. the default at 95% of screen height for columns), but only at a "later" point (further "above"). With very long pages, what I am observing, is that the further I scroll down, the later elements+images will appear on the screen.
First, they appear right at the bottom of the screen when you scroll. As expected. Then, as you scroll down further, the next elements appear maybe at 2/3 of the screen. Then only at 50%. Then 25%. And eventually, almost all of the screen remains empty, even though the elements should have faded in long time. So the user simply doesn't see anything, until only in the "very last moment" basically.
With pages that aren't too long, this can be worked around by modifying the offset to some artificial value, e.g. 150% instead of 95% -- note, that in this case, the elements still only appear when in-screen. But if you have a REALLY long page, like 7-15 screen heights, it becomes absurd and unmaintainable. The longer the page, the more "off" the offset is (no pun intended ;)).
The only solution then seems to be to turn off ANY animations, not use image fade-ins, and not use split headings -- or basically anything which seems to be "triggered" at those animation offsets.
Because the problem also effects animations within Global Sections, the animations have to also be turned off in Global Sections, so it is not possible to manually fix ("work around") only a single long page where the problem occurs.
It seems that the "measurement" of the offset can break depending on the length or type of content on your page, which is unknown to me.
Expected:
All entrance animations and scroll effects should occur at the scroll position they are set up too.
Example:
Site where I am experiencing the issue:
https://www.bigg-change.come/conference
(This is the public site, here the effect is still somewhat moderate. In the unpublished private version where I have added 6 more speaker rows, the effect is also much more apparent, so it seems that the problem grows based on the number of rows/columns/images somehow. )
Please note as you scroll down how the headlines "Weitere Folgen..." or "Zum Programm" appear really late, if you scroll slowly from the top. Note that the problem is also less severe if you reload the page at the already scrolled down lower position.
I would very much appreciate any comment on how it can be fixed/worked-around.
Thank you very much in advance !
Robert
Hey robertc,
Thanks for the Detailed Explanation.
Escalating this to the Developer for further response.
Best
ThemeNectar Support Team
Hey Robert
The issue is occurring in your setup due to the lazy loading option being active in combination with your images that are not provided at a large enough size to fill the column that they live in.
When images are lazy loaded, there is no data available about the final size of the image other than the aspect ratio. We use that aspect ratio relative to the available space in the parent column to calculate a temporary width/height for the image prior to it being loaded in (when it is scrolled into view). In your page, when viewed on a display large enough, the images are smaller than the parent column so that logic isn't 100% accurate and the estimated height of your images is calculated larger than it needs to be. This then messes with the offset calculations of the animations. You can see the excess space in the below screenshot, which will ultimately be added to the height of the image as well:
The more images that this occurs on, the more the offset will calculate wrong down the page, and the larger the monitor, the larger the differences will be. It seems all of your images are provided at the same 546 x 546 dimensions, so the problem should compound in a linear fashion, at least on the provided page URL.
--
You can correct it in a few ways. Some quick ways to fix it would be to
Add the following snippet into the custom CSS box located in the Salient options panel > General Settings > CSS/Script related tab:
.vc_col-sm-6 img.nectar-lazy:not([srcset]) { max-width: 546px; }Outside of those quick fixes, you could also correct the problem by providing larger images which will be able to fill the column that they are in. You can still keep the excess spacing on the left/right by adding column padding to the sides using the column settings.
Kind regards,
Thank you for this in-depth explanation! I think I'll be able to work around this using your help.
Is this an issue than can possibly be fixed in a future version of Salient, so that it works reliably "out of the box"?
Thanks,
Robert