Angle separator rendering line on preview

Support
#1

A faint horizontal line appears at each angled separator sections when previewing responsive windows. I can’t seem to mimic this in the browser or on actual mobile devices.

Is this a known bug? I want to assure the client that these will disappear in production. Thx!

Staging site

#2

Hi,

I can’t replicate this issue across my test sites.

Can you provide us your wordpress admin login in Secure Note so we can take a closer look.

Thanks

#3

HI there,

I checked and I don’t see any lines in the preview. Would you mind providing a screenshot of what you’re seeing? Perhaps it’s the bounding box’s lines when hovering above it?

Thanks!

#4

Hi Rad,

I’m attaching three screenshots that were taken using the Blisk emulator.

I don’t see these when testing on my desktop or iPhone so I’m hoping that this is just a rendering issue with responsive emulators. I’m just looking to see assure my client that this won’t happen in production.

Thanks,
Janel

#5

Howdy, @WaggingLabs!

Thanks for writing in! I tested this on my local computer, an iPhone, and an Android device and was unable to replicate this issue, although I have seen it pop up from time to time. The issue has to do with the fact that the separators are svg elements placed inside a div, which is then positioned relatively to the parent Section to create this effect, so what you’re seeing at times is the background of another section showing through in a tiny gap that might appear due to how the browser is rendering the page at that specific screen size. The way we’re positioning these separators eliminates this issue for the most part, but some browser may still render it if there is a sub-pixel rounding issue.

There is one things you can do if you wish to be absolutely certain that you won’t see any gaps. If you inspect the Section in your browser, you’ll see that these dividers are placed into div elements with class names of x-section-separator-top and x-section-separator-bottom. If you implement the following custom CSS into your theme, this should help to ensure that you will never encounter a gap:

.x-section-separator-top {
  top: 1px;
}

.x-section-separator-bottom {
  bottom: 1px;
}

This works because to position the separators, we use position: absolute; relative to the Section, and then place the top separator at top: 0; and the bottom separator at bottom: 0; and from there, we use CSS transforms to translate the position of the separators to the outside of the section. Using these 1px alterations will move the sections in and should ensure that they always overlap the section by 1px, and keep the gap from appearing.

Do keep in mind that in doing this, you will be shaving off a very slight amount of the angled look used on the separators, and it may not appear to go all the way to the edge of the section, so there is a very slight trade-off, but obviously that is likely far less noticeable than a potential gap showing up when you don’t want.

Hopefully this helps to point you in the right direction, cheers!

1 Like
#6

This solution did not work for me. Exactly same issue.

#7

Hello There,

Thanks for updating this thread. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Regards.

#8

I’ve also had this problem, but only using the curved separators. The CSS code provided didn’t work. In the end I used this bit of code in the Global CSS and it fixed the problem:

.x-separator-top-curve-in {
    top: 1px !important;
}
1 Like
#9

Glad to hear it’s working :slight_smile: