Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
I try with other videos and the border still showed. The think is that in other if the video have colors or black background it's difficult to see the black border but it's happening with all the videos.
So far, I have not been able to replicate this in order to try and troubleshoot it. I've tested on Windows (Chrome, Firefox, Edge) and Mac (Chrome, Safari, Firefox, Opera), without any showing the lines. Here's a screen recording of cycling through the browsers while scrolling around that section: https://www.dropbox.com/scl/fi/s6tsufs50jwac9etrkam1/video-background.mp4?rlkey=di7pnv3p42rhbaoi0cpqoxof6&st=chzhp4j5&dl=0
Have you been able to replicate this on more than one machine?
Yes, I'm not the only person in my office that see this black lines. There is only 1 person that don't see the lines but all of us have the same configuration.
The only difference between my partner and me is that my PC have Intel and his PC have AMD. Btw on the mobile it's doesn't appear the lines.
I have also tried using BrowserStack to load additional instances on other machines, but I still cannot reproduce the issue. Unfortunately, this makes it difficult to troubleshoot. Could you provide a screen recording of the issue occurring so we can better understand how and when it happens for you?
If that doesn't change it, try seeing a very large clip path to see if it moves the black line position just for testing e.g. clip-path: inset(0 200px 200px 0);
2. Disable the "Footer Reveal Effect" in the Salient options panel > Footer tab.
It looks like the CSS snippet was entered incorrectly - two "insets" were present, which caused the rule to fail:
I've edited it to the correct syntax and it's taking effect now. Can you confirm whether the lines have moved to follow the inset or are you still seeing them on the very bottom?
Since the lines continue moving to the edges even when significantly clipped, this suggests a core rendering issue that may be beyond our control. Unfortunately, because I can't see it myself, testing various workarounds is challenging. However, I've adjusted the CSS once again in another attempt. Could you let me know if this affects the lines in any way?
Since the lines appear when the video is larger than the viewport (expanding beyond the browser viewport due to the recent change) and when the video is clipped using a mask (as per the previously provided snippet), they are not directly related to the video's positioning. Additionally, there is no black background behind the video that could be bleeding through. Unfortunately, given this, I'm unsure what else could be causing the issue other than something related to your machine's specifications affecting how the video is processed in the browser. You could try re-encoding the video or using a different file format (e.g., WebM vs. MP4), but it does not appear to be an issue caused by anything within Salient.
I'm using a background video but I don't know why when I scroll sometimes it show a black line under the background video block and in the right side.
Hi there,
Thank you for getting in touch.
Please share a screenshot of what you're seeing from your end so we can check it out and advise. I can not replicate this error from our end.
We look forward to your reply.
Kind regards,
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.wpb_row .nectar-video-wrap video { width: 101% !important; height: 101% !important; }Thanks
ThemeNectar Support Team
Just added a negative margin, please check.
Best
ThemeNectar Support Team
It's doesn't work, still showing the black line on the bottom and right border
Could you try adding another video and check ?.
Best
ThemeNectar Support Team
I try with other videos and the border still showed. The think is that in other if the video have colors or black background it's difficult to see the black border but it's happening with all the videos.
Thanks for confirming, which browser are you able to recreate the issue ?.
Escalating this to the developer for further response.
Best
ThemeNectar Support Team
I test it with the next browsers:
-Microsoft Edge
-Google Chrome
-Brave
-Mozilla Firefox
Hey NetworkSec,
So far, I have not been able to replicate this in order to try and troubleshoot it. I've tested on Windows (Chrome, Firefox, Edge) and Mac (Chrome, Safari, Firefox, Opera), without any showing the lines. Here's a screen recording of cycling through the browsers while scrolling around that section: https://www.dropbox.com/scl/fi/s6tsufs50jwac9etrkam1/video-background.mp4?rlkey=di7pnv3p42rhbaoi0cpqoxof6&st=chzhp4j5&dl=0
Have you been able to replicate this on more than one machine?
Yes, I'm not the only person in my office that see this black lines. There is only 1 person that don't see the lines but all of us have the same configuration.
The only difference between my partner and me is that my PC have Intel and his PC have AMD. Btw on the mobile it's doesn't appear the lines.
I have also tried using BrowserStack to load additional instances on other machines, but I still cannot reproduce the issue. Unfortunately, this makes it difficult to troubleshoot. Could you provide a screen recording of the issue occurring so we can better understand how and when it happens for you?
Here you have, I had to record with the phone because when I recorded with the PC the black line it doesn't showed
https://drive.google.com/file/d/1syF4m9CaAwtuwAQy-pw2bqWU6TlQYRw3/view?usp=sharing
That's quite strange that it won't display in a screen recording. A couple things you can try on your end to see if it changes anything:
1. Add a clip-path to the previously provided CSS snippet:
.wpb_row .nectar-video-wrap video { width: 101% !important; height: 101% !important; clip-path: inset(0 2px 2px 0); }If that doesn't change it, try seeing a very large clip path to see if it moves the black line position just for testing e.g. clip-path: inset(0 200px 200px 0);
2. Disable the "Footer Reveal Effect" in the Salient options panel > Footer tab.
Kind regards
I try the CSS that you provide and the black line position doesn't move or doesn't disappear.
I also try to disable the Footer Reveal Effect but nothing change.
I know it's very strange all this about the black line but the client that I made the web for have the same problem than us so I need to fix it 😅
It looks like the CSS snippet was entered incorrectly - two "insets" were present, which caused the rule to fail:
I've edited it to the correct syntax and it's taking effect now. Can you confirm whether the lines have moved to follow the inset or are you still seeing them on the very bottom?
Yeah the lines have moved to follow it.
Attached files: 20250129_090654.jpg
Since the lines continue moving to the edges even when significantly clipped, this suggests a core rendering issue that may be beyond our control. Unfortunately, because I can't see it myself, testing various workarounds is challenging. However, I've adjusted the CSS once again in another attempt. Could you let me know if this affects the lines in any way?
Now it's like at the start, the video is full width and the black lines still on the bottom and right borders
Since the lines appear when the video is larger than the viewport (expanding beyond the browser viewport due to the recent change) and when the video is clipped using a mask (as per the previously provided snippet), they are not directly related to the video's positioning. Additionally, there is no black background behind the video that could be bleeding through. Unfortunately, given this, I'm unsure what else could be causing the issue other than something related to your machine's specifications affecting how the video is processed in the browser. You could try re-encoding the video or using a different file format (e.g., WebM vs. MP4), but it does not appear to be an issue caused by anything within Salient.