Line gaps in between separators and sections

[JacobNFerguson]

I’ve had this problem for the entire time I’ve had an X site. Tiny line gaps mysteriously appear in between sections when separators are applied. I see a lot of support tickets and I’ve tried a lot of things but I’ve never been able to implement a solution. Is this like a rare and enduring bug for X without a fix?

I’m on Chrome, 14" laptop screen. I know it’s hard to replicate it on your end with all the different setups so I included a screenshot so you can see it. I’m PRETTY SURE, if you just adjust the browser zoom on your setup in increments from 75% to 150% they will manifest at different sections and separators for you like they do for me. They are also very prominent on my mobile device with a regular zoom when the sections aren’t hidden.

The closest thing I’ve found to a fix is placing this code into Theme Options CSS:

.x-section-separator.x-section-separator-top.x-section-separator-curve-in {
transform: translate(0, -99%);
width: 105%;
}

.x-section-separator.x-section-separator-top.x-section-separator-curve-out {
transform: translate(0, -99%);
width: 105%;
}

It fixes most of them, but not all. And like I said, they manifest in different areas as one increases/decreases browser zoom.

I’m going to remove the above code from CSS right now so you can see.

Thanks for any help in finally resolving this issue once and for all.

[ruenel]

Hello Jacob,

Thanks for posting in! I tried to replicate the issue on my end.
I cannot find any line gaps in the section or with the section separators.
This is what I am seeing:

I have resized my browser may times and even tested your site in Chrome and Firefox. Can you please specify in which browser you are experiencing the issue?

Thank you.

[JacobNFerguson]

This is so strange. A lot of the support tickets I read, the techs say the same thing. I think maybe you guys just have awesome setups (but I don’t know). I can assure you though on many average laptops and mobile devices that this problem has plagued all my X sites for a while, across a wide and diverse number of setups. Do you think it’s a browser thing, or a screen size / zoom thing? Right now I’m using Google Chrome Version 78.0.3904.97 (Official Build) (64-bit).

I know you guys have heard this one a lot, what have you settled upon is the general answer/cause of this line gap problem many people have experienced (but you can’t often replicate on your end)?

Thanks

[ruenel]

Hey Jacob,

Have you tried checking your site using another machine? Find another computer with the same screen as your laptop and also an even bigger screen so that you can compare it. It would also be helpful if you can test with different browsers too. I have a hunch that maybe you are just simply experiencing browser caching issues. I recommend that you clear your browser caches or use private browsing mode or Incognito mode and test your site again.

Regards.

[JacobNFerguson]

Hi, sorry for the delay getting back to you. It took me a little time to get to another computer to try it. These line gaps manifest in different random places on all size of devices, all browsers I’ve tried, and in incognito/private browser mode. I purged all Wordpress cache and cleared all browser caches on my devices and no difference.

If it helps you diagnose… on mobile I identified that one line gap would only appear when I scrolled down, and when I scrolled up it would disappear, repeatedly. Also, on desktop one time I sat back and didn’t touch any controls and watched a line gap repeatedly appearing and disappearing on its own, like flickering on and off.

Very strange stuff.

[albrecht]

Hi Jacob,

Thank you for sharing your investigation regarding the issue. I was able to replicate the issue now. Could you try adding this custom css.

.x-section-separator-bottom, .x-separator-bottom-curve-in {
    bottom: 2px !important;
}

.x-section-separator-top, .x-separator-top-curve-in {
    top: 2px !important;
}

Hope it works. Thanks!

[JacobNFerguson]

It fixed it just about everywhere except 2 places where I had some custom Z indexes set. For example a line gap still manifests on my mobile device at thegods.band/songpage under the “Recordings (Mobile)” section, which has a z-index of 2. The only reason it has a z-index of 2 is because the separator would not show without it. I still don’t entirely understand z-indexes, because I’ve had problems with separators not showing and noticed the z-indexes were not all set to 1 by default, which is strange because I don’t believe I ever adjusted them (I didn’t even know what they were until last week when a support tech let me know that’s why my separators weren’t showing in some spots).

Anyway, the spot mentioned above is the only spot left as far as I can tell, and I don’t know how to fix it. I tried everything. There was another spot, but I managed to fix it by toggling device visibility on/off for the sections and duplicating them in different order (cause I think it might have something to do with the order the sections were created in the code?) I have no idea what I did, but that one is fixed now. So if you could just help me fix the one above, or understand what I’m doing wrong. Because I imagine this will be an ongoing problem in the future unless I figure it out.

Thanks a lot for the help.

[alexander]

Hi Jacob,

Thanks for the update! Good to know we’re getting somewhere. I’ve updated the code snippet in Albrecht’s post to include an additional selector that should handle the use case on that other page as well.

As for z-index values, every section has a default z-index of 1 when it is created.

Another way you could tune the positioning of the separators would be editing each one and setting the “inset” value to 2px or more.

[JacobNFerguson]

Cool, thanks a lot. That appears to have taken care of them all.

Just out of curiosity, why do you recommend 2px instead of 1px? Is it your experience that with 1px code, some browsers/zooms might still show the line gaps? I just edited the code to 1px because 2px was flattening my separator curves a little too much on mobile… and it seems like it is still working.

Also, I’ve been adding this code on each page I need it for. Can I just put it into Theme Options CSS for all pages?

Thanks a lot

[alexander]

Hi Jabob,

You’re most welcome. You can use 1px. We started with 2px just to be sure. I think 1px should actually be fine because the issue itself is likely a “sub-pixel rendering issue” which just means that the browser is interpolating between two whole numbers on higher density screens or when browser zoom is in effect. Because the HTML/CSS pixels don’t equate to actual screen pixels, the browser is just guessing which color to show and in this case we end up with a very small gap. A single pixel should be enough to close that.

Yes! You can certainly add this in the global Theme Options CSS.

[JacobNFerguson]

Ahhh, got it. Thank you so much alexander.

[friech]

We are delighted to assist you with this.

Cheers!