-
Posts
-
Hi team krisi,
in my main-menu the font-weight or font-size of three words is different to the other. They are a little bit thinner. Its only visible on large screens and Safari (so far I know).
I can’t find the detail which causes the difference.
Here is a sreenshot:
ScreenshotHi,
Thank you for using Enfold.
The menu items look the same on my browser, Chrome Windows 7. What is your browser?
Best regards,
Ismaelhm seems to be a rendering problem of safari. it is strange because if you activate each of your menu points one after the other. sometimes the difference is gone.
By the way – the same thing on Safari Technology Preview.I found out its because of the submenus on the left-hand side of the three thinner words.
I changed the “margin-top:-1px” for .av-main-nav ul to 1px, so the submenu slips down and doesn’t cover (?) the menu items anymore.
Thanks for your concern Guenni007.Oh. Rejoice too soon.
Margin-top has to be at least 13px, which looks weird with a gap between the main- and submenu.Which part of the submenu covers the main-menu-items?
i guess it has something to do with: anti-aliasing of safari font rendering
try this here first as a global rulehtml { -webkit-font-smoothing: antialiased; }but on this adivise from: https://blakepetersen.io/how-to-clean-up-chrome-and-safaris-webfont-rendering/
Use Wisely
For these last two hacks, each character re-rendered will require extra resources so it’s best NOT to use these to render large swaths of copy. Use these on headers and global elements where you will have the most impact, but for the main copy use ‘serif’ or ‘sans-serif’ and let the browser decide.try perhaps only:
.av-main-nav > li > a { -webkit-font-smoothing: antialiased; }by the way i see you use a different font for this – do you have all web-font files uploaded?
Hi!
Let us know if what @Guenni007 is suggesting, if that does not work, also try
* { -webkit-font-smoothing: antialiased; }let us know if you need anything else
Regards,
Basilis
- You must be logged in to reply to this topic.