Horizontal lines on the HTML landing page with Safari

[EricL2017]

Hi, there are horizontal lines appearing before/after sections on the HTML landing page. This happens on Safari version 14.0. It also appears randomly, depending on the size of the safari window. Attached is an example of the issue, which is easy to reproduce.

[einazare]

Hello there, @EricL2017 ,

At the moment we do not have a fix for this.
From what we can tell, that line only appears when resizing the window, we think it may be a bug from the actual browser.
A quick fix could be the to change the following line:

<svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0">

To

<svg class="absolute bottom-0 overflow-hidden -mb-1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0">

This will make the fancy skew go downwards a bit (~4px), this means that it should cover the 1px black line that you see.

Let me know if that solved your issue.

Best,
Manu

[EricL2017]

Hi Manu,

Thanks for your quick response. I applied the changes that you suggested, however it does not fix the issue. See attached the updated HTML landing page, for reference.

Thanks!
Eric

landing.html.zip

[einazare]

Hello again, @EricL2017 ,

I've tried to figure out a solution, but at the moment, the only one is to delete that SVG altogether, this means that you will no longer have that nice skew.
Let me know if you find another solution.

Best,
Manu

[ryanwinchester]

I also see the line in Firefox and not just from resizing the page.

[ryanwinchester]

@einazare @EricL2017 also, I think the -mb-1 fix would work, but I don't think that class is included in the provided compiled tailwindcss file.

[ryanwinchester]

I added style="margin-bottom:-1px;" to each SVG and it mostly fixed it. The top one still had the line almost randomly. And it could disappear and reappear when scrolling.

When I removed transform: translateZ(0px); it seems to have disappeared completely.