-
Hi,
I’m noticing differences in the display of the Coach starter site menu between Firefox and Chrome/Edge for the lines that appear above the menu items when hovering over them.
On Firefox, the display is correct: all lines above menu items have the same thickness.
On Chrome and Edge: thickness varies from one menu item to another.See on this picture:
https://imgur.com/2qOMQpGHow can I solve this issue?
Thank you for help. -
Hi there,
i am not able to replicate that on my Mac on any browser.
And the CSS used for that effect is the same for all items. So it may just be Chromes rendering engine thats having a hard time with such a fine vertical line.Does it happen when you install the site on your own server ?
-
Hi,
Yes, and i have the same issue when I copy the css code for this effect on another site build with GeneratePress.
-
If I use a width to 5 px, the issue actually disapears.
-
In the CSS there is a
width: 1px
property.
Does increasing that value eg. 2px or 3px resolve the inconsistency ? -
yes with 3 pixels, the issue is solved, but not with 2 px.
-
To obtain the same width on Chrome and Firefox, I use in the CSS:
width: 3px
and
I replacetranslateX(-50%)
byscaleX(0.5)
Is this method also correct?
-
I don’t think theres anything that can be done to resolve that.
There are several issues, primarily related to the browsers rendering engine which will be compounded by the device and DPR ( Device Pixel Ratio ) of its screen.You can try the Chrome > Settings > System -> Use Hardware accelaration so it can use the computers GPU to “improve” rendering.
The underlying issue comes from a 1px vertical line being absolutely positioned 50% across the width of a menu item. Which may result in the calculated position being a fraction of a pixel.
Most “good” browser compensate for that and matches the nearest pixel.
But Chrome is notoriously bad for rendering thin lines.This positional issue, that splits a pixel , is compounded by the DPR of the screen. Higher resolutions will have more wiggle room for splitting pixels. But they can also split pixels even more.
So aside from increasing the width or possibly changing the lines colors, theres not anything we can do to fix chromes little issues.
EDIT: Your Scale option is good 🙂
- You must be logged in to reply to this topic.