-
Posts
-
I’m seeing an issue on http://box5142.temp.domains/~centusp6/ where it seems, if i’m viewing with my browser at full width (1920), the background images in the color sections sometimes seem to get “stuck” and thus reveal the white background as you scroll up (see https://screencast.com/t/nQi8e32tC). If I adjust the browser width just a little bit one way or the other, the background image “snaps” into place and properly covers the color section “window” as you scroll. I can’t seem to replicate the issue with any real consistency, but if you click around from page to page on this site and reload pages with your browser set pretty wide, I think you’ll start to see the issue — and when you do, if you just resize your browser a little (even resizing it wider), you should see the correction I’m referring to. Are you familiar with this issue / do you know of a fix? Thanks!
Hey sky19er,
https://cl.ly/5710889a372a It looks fine on my 2500+ px screen. Which browser are you getting it in?
Best regards,
VictoriaI can recreate it pretty easily by just reloading the home page and/or clicking to other pages in chrome, safari and firefox (all mac). My client pointed it out to me, so I know it’s not just my machine, but they may also be on macs only. You might have to scroll down a little more and/or close your inspector. Here’s another screen grab, from Safari this time (my first one was from Chrome): https://screencast.com/t/EmdOQ6YHIlJx and FF: https://screencast.com/t/ThhCFfMkH4np
Ah, so it’s apparently an issue with LayerSlider WP, eh? It’s true, I deactivated LayerSlider via the theme options and it seemed to fix the issue. But we need LayerSlider on this site. Do you have any advice as to how I might resolve the issue, other than deactivating LayerSlider or disabling parallax in those color sections? Thanks!
Hi,
Thank you for the update.
It’s not really an issue with the layer slider. The error, which is not directly related to the “parallax” issue, is from a custom script added in the head tag.
See: https://pastebin.com/pdWQuWfR
This is a quick fix for the parallax background:
.home #av_section_3 .av-parallax.active-parallax.enabled-parallax { top: -350px !important; }The css code should pull the parallax background upwards. You can also try to use a larger background image.
Best regards,
IsmaelThanks, Ismael. It looks to me from your screenshot that the custom script you’re referring to would be coming from the “Disable Right Click For WP” plugin I had installed — don’t you agree? But I’ve removed that plugin, cleared the cache, and I’m still seeing the issue. And thanks for the css fix, but there are many of these sections throughout the site, so it’d be nice to actually fix the issue — any other clues for me?
Hi,
Thank you for the update.
Is it happening to a lot of pages? A quick fix is to replace “parallax” with the “fixed” option temporarily. Or as suggested above, try to use a larger image and make sure that the aspect ratio is 16:9 (1920×1080, 1600×900, 1366×768). The current size of the image is 1000x500px.
Best regards,
IsmaelYes, those sections are on other pages and it’s happening on those other pages, too. And uploading the background image at even 1600×1600 doesn’t fix it (I left the orange one on the home page at that size so you can check). But after more testing, I’m realizing It only seems to be happening on the pages with layersliders at the top of the page. I can consistently replicate the issue on pages with the layerslider at the top (home and Managment) — if you just click back and forth between those pages and scroll down to those sections, you should see the white gaps. Adjust the browser width a little, and the backgrounds snap into place to cover the white gaps. Click over to management or home again and the white gaps are back. But you’ll never see the white gaps on Services, where there’s just a video at the top. And if I remove the layersliders from Home or Management, that seems to solve the issue. So, it seems to me it must be some kind of conflict between the layserslider and the color section background image parallax. Note, I also tried removing the parallax from the Home layerslider, but that didn’t fix it (I’ve left it that way, so you can see) — so it seems to be a conflict with the layersliders, whether or not those layersliders use parallax.
I can drop a class in each of those sections and apply your css fix to that class — that does seem to be an acceptable fix — but I figured I’d run this new info/testing by you and see if you have any other ideas before I just settle for that. Please let me know either way, or if you have any other questions. Thanks again for your help.
Hi,
Thank you for the info.
And uploading the background image at even 1600×1600 doesn’t fix it
Have you tried resizing the image to 1600x900px? The image should have an aspect ratio of 16:9 to allow the parallax script to properly calculate the offset value. Or try to use the “Fullscreen Sections/Sliders” thumbnail version of the image, which has the same exact size.
seems to be happening on the pages with layersliders at the top of the page.
Do you have a test page where we can see the layer slider and the parallax background issue?
If I adjust the browser width just a little bit one way or the other, the background image “snaps” i
The following script will emulate a resize event, which hopefully snaps the parallax background into place. Please add it in the functions.php file:
add_action('wp_footer', 'ava_auto_resize'); function ava_auto_resize(){ ?> <script> (function($){ var int = window.setInterval(function(){ $(window).trigger('resize'); $(window).trigger('debouncedresize'); $(window).trigger('av-height-change'); }, 1000); $(window).on('load', function() { setTimeout( function() { clearInterval(int); }, 5000); }); })(jQuery); </script> <?php }Best regards,
IsmaelYes, I tried 1600×900 — no deal. And both pages I referred to — the home page and the and Management — have the layerslider at the top and show the parallax issue in the color sections below on those pages. Thanks for the code to emulate the resize event, but I don’t have a child theme in place on this site and I’d rather not implement one just to try this php workaround. If I’m going to settle for a workaround, I might as well just use the css workaround you provided earlier. So, thanks anyway, thanks for the css fix. and let me know if you find an actual fix the conflict — I think you should be able to recreate it pretty easily on your end. For now, I have to move on and take this site live.
- The topic ‘color section background image parallax issue’ is closed to new replies.