White line in pro header menu in chrome

Support
#1

dear support,
only in chrome i see a 1px white line on the right side of some of my top menu buttons.
not nice and i don’t know how to get rid of it.
id did some css fix for ie11. it worked first. then i changed some of the alignments of the menu elements. i think it started then showing.
thanks a lot! kai

#2

Hello There,

Thanks for posting in! I have logged in to your site and I could not replicate the issue. This is what I am seeing in Chrome.

Could you please provide a screenshot?

Thanks.

#3

thanks a lot! did you check all the top menu buttons?

#4

Hello There,

Yes I have checked all the menu items and I could not replicate any issue. Could you please clarify? Perhaps a screenshot would be nice to give us an idea of what is happening in your screen.

Thank you.

#5

i am on latest chrome on mac OS 10.12.6. only “wer” and “referenzen” show the stripe on hover.

#6

Hi there,

I can’t reproduce it, what version of chrome you’re testing it with? Is it the beta?

Thanks!

#7

latest official version on macOS. Version 63.0.3239.84 (Offizieller Build) (64-Bit)

also i now noticed that the white lines keep moving. now they appear on other buttons than the ones mentioned.

#8

Hi There,

I have tested your issue on a Mac using Chrome browser, but I could not replicate this issue as well. I have added a screen recorded video (check secure note).

It seems that this issue is only specific to your end. Try disabling your browser extensions and see if there’s any difference.

Thanks!

#9

thanks for testing! i disabled all extensions. restarted. cleared cache again. restarted. text is not bold on my end. sorry. but you say that the 3 lines of text are being displayed correctly (bold) on your chrome browser on mac? also: are you viewing the page in cornerstone or nomal preview? because in cornerstone the text it bold on my end. thanks! kai
ps: your screencast does not load…

#10

Hi There,

I think you will need to enable adobe flash player to view the video and allow few seconds to buffer.

I have checked the live preview not in the Cornerstone.

Thanks!

#11

hi there,
i have flash enabled. the page just does not load. i also experience this with screenshots from your support. nothing.
so you still do not see the white line? please check all the buttons everytime. they keep moving the white line…
when i omit the tracking from your site this url is left:
https%3A%2F%2Fscreencast.com%2Ft%2FJHPjtysfn&post_id=93614&topic_id=17859
but it does not work in any of my browsers.
thanks, kai

#12

Hi there,

Couldn’t see it either on my end, but I’ll continue checking.

About the text being bold, it’s because of font smoothing and it’s common in Mac OS. For that, you will have to add this CSS to your global custom CSS.

@media screen and (-webkit-min-device-pixel-ratio:0) {    
	*, body {
	      -webkit-font-smoothing: antialiased;
	}      
}

Else, you may follow this https://stackoverflow.com/questions/37301132/chrome-overall-font-rendering-issue-2016

Thanks!

#13

hi rad,
thanks a million. that css does help. it still looks thinner than in other browsers, but even nicer to my eyes :wink:
i wonder:
did i do something wrong or unusual? why is that one not “fixed” in pro by default? i can’t be the only person using pro, chrome and styling text with (default in text editor).
thanks again! kai

#14

Hello Kai,

This is not your fault. This is an issue with chrome itself.

Best regards.

#15

thanks bappi! still i wonder why nobody else stumbled over this issue…?! and why not add the css as a standard fix in pro?

#16

Hi there,

This issue occurs in some very specific chrome versions/installs, as you can see no one among us can replicate the issue. This is a browser specific fix so no need to fix pro!

Thanks for understanding.

#17

hi there,
well, i experience it on my “normal” chrome installation on mac and my customer on her iphone in chrome.
but thanks for explaining. it looks ok for now.
best regards, kai

#18

You’re welcome :slight_smile:

#19

For some reason this topic changed somewhere in the middle to another one. sorry!

The original problem still exists. I deleted chrome and the chrome folder in application support.rebooted my mac. and reinstalled it. the white line is still there.

#20

Hi again,

I was able to replicate the issue on windows 10 using chrome. I went ahead and added the following code in your Customizer:

.hm10.x-menu > li > .x-anchor .x-anchor-particle-primary {
    border-right: 1px solid rgb(189,37,50);
    border-bottom: 1px solid #fff;
}

This seems to have fixed the issue. Please clear your browser’s cache and test the site again.

Let us know how this goes!