I have applied grain effect like this project on my website. The homepage is perfectly fine like the project.
However as I went to apply the effect on another page with huge grid system, the grain effect seems to flicker badly (eye strain warning…) on the published site. Deleting the whole grid does solve the problem but I kind of need the grid to place my images. I believe the code in the settings is okay since the homepage (with grid too) is doing fine.
Can anyone advice me on this? Thanks!
(do navigate to the “head to toe” page!)
Published link: LINK
Read-only link: LINK
Hi @sherlyntandinata, thanks for your reply. It looks like you have a lot of content nested within the overlay, I would recommend to move the portfolio works div and nested elements as a sibling to the Overlay in the navigator and update some of the overlay styling:
Restructure the content so that the fixed nav is just under the body:
Update the Overlay to be position absolute with a full cover and z-index of 5:
After following your steps, the flickering does stop.
However, there seems to be an overflow for the grain effect overlay. On the updated published site, the overlay seems to be jumping on the site as the bottom unwanted horizontal scroll moves rapidly on its own. The grain overlay itself only covers the top part of the page.
Hi @sherlyntandinata, thanks for your reply. If you take a close look at the original example site you shared, the effect is on a div having relative position.
That Example is also a single page example, not a multi-section example, so I would give your overlay a position relative and set the overflow to scroll:
See if that helps, if not, you may have to contact to the script maker for what is the best structure to use for that script.
Thanks!