Hi all,
I have a background video and also color overlay. This overlay is flickering all the time. I tried to fix it, but noo result.
Am I missing something?
https://www.grupomedsum.com/
Hi,
I have the same problem and it seems like there’s no solution for this on the web, even considering overlaying a video a pretty normal design choice.
Writing this mainly to refresh this topic, but has anybody found any solution to this? Can it be repaired using some custom code?
The flickering of the background video overlay could be caused by issues with CSS rendering, conflicting styles, or browser performance. To fix this, try ensuring that the overlay is set to a fixed position with z-index to layer it correctly above the video. Additionally, check that the overlay is using opacity for transparency instead of background-color with transparency, as the latter can sometimes cause flickering. You can also try adding a transform: translateZ(0); property to the overlay to trigger hardware acceleration, improving the rendering. Finally, ensure the video file size is optimized and that you’re using a supported format to prevent performance issues across different devices. Feel free to contact me if you face any further issues.
I have
section_video with position:relative
inside that are
video_wrapper with position:static that holds the video file inside
section_text_wrapper (background with gradient applied) with position:absolute that covers 100% of section-video
and inside section_text_wrapper are some text, padding divs and button
I can’t use opacity effect because I use gradient so it doesn’t make sense for me. I tried z-indexing before but the flickering problem still remained. Plus absolute positionig in this case does the same, am I right?