Thin line rendering in images


I’m having some issues with a thin line showing up over some of the images on the page I’m working on. The affected images are inside the .divider div. The structure is as follows:

.divider → div with set height to serve as divider between sections
.top-border → position absolute to fill the top 15% of the divider, with a background .svg wave shaped graphic. Serves as a top frame for the image
.btm-border → same as top border, but for the bottom.
.divider-img → position absolute to fill the whole divider with a background image.

I suspect the top and bottom borders are causing the issue, but I have not been able to figure out how to fix it. The line does not always show up, but by resizing the browser window I’m usually able to reproduce the error. Please see the attached screenshots from Safari on mac and iPhone. I have also been able to reproduce the issue on chrome and firefox for desktop.

Here is my read only link: Webflow - Mamasea

Live site

It’s a minor issue, but quite annoying. Anyone got any tips?

Thanks in advance!