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!

Hey Tobias:)

Did you manage to fix it? I have a site that is full of little borders like this and it ruins all the beauty of design. Please, help:(

Your work is incredibly beautiful by the way, love that so much

Hi Daria,

Thank you for the kind words :slight_smile:

Unfortunately, I haven’t been able to fix the issue. Being mainly an annoyance, I haven’t had the possibility to dedicate much time to it. I’ll be sure to post back here if I ever find a solution.