Shape divider one pixel horizontal line?

Hi @tombie,

Would you be able to share a link where I can see this live? That would help me diagnose the issue. Thanks!

Best,
Nick

Thanks for checking on this @ndiego!

While I can’t provide a live version, (site is a work in progress) it is possible to recreate.

On a blank black page, I’ll add the icon block and then add the custom svg below and set width to 100% in the block settings. And the block align as full width. And then the background of the icon block as white.

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23fbd8c2"/><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" opacity=".5" fill="%23fbd8c2"/><path d="M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z" opacity=".5" fill="%23fbd8c2"/>

Then I just preview the page and inspect in chrome various dimensions. Samsung galaxy s20 ultra for example added a white line above the svg.

Hi @tombie,

Thanks for sharing the SVG. Unfortunately, I was not able to replicate it natively on Chrome or Safari. However, when I used the Chrome dev tools to preview on iPhone, I did see a white line on the right-hand side of the icon. The root of the issues seems to be that as the SVG scales, the paths inside the SVG do not always scale to completely fill the SVG.

This is a bit of a guess, but I think this has to do with the viewBox values. When you set the background of the icon to white, it actually sets the container <div> around the icon to white. The <svg> fills the <div> (unless there is padding applied). I wonder if setting the viewBox values to whole numbers would solve this. My guess is that some rounding is going on and occasionally the white background will peak through.

Again, this is just a guess. You could also try exploring the SVG with a white background, or whatever background you need for your site.

Sorry I don’t have a definitive answer for you. Let me know if I can help further.

Best,
Nick

Hi @tombie,

Just checking in to see if you were able to resolve the issue by updating the SVGs.

Best,
Nick

Hi Nick. Sorry for the late reply. I didn’t manage to solve it and ended up just accepting it, haha. :’D Might give it another try some day, but right now I can live with it. Thanks for your help!

A rendering issue arises when the previous sibling of a shape divider has a fractional size (e.g., 100.3px). This issue is not specific to the SVG itself, as it also occurs when using a basic <div> with a background color.

Possible Solutions

1. Using Negative Margin
Apply a small negative margin to the shape divider to correct the alignment.

.shape-divider {
margin-top: -1px;
}

2. Rounding the Fractional Size
Round the height of the previous sibling element to avoid fractional values.

.previous-sibling {
height: round(nearest, 70vh, 1px);
}