I have a weird problem going on in my project. I have a navigation menu where, when you hover it will change the font-weight from 400 to 900. It works just fine in Apple based products. However, when I try it on windows, by hovering over the links they get messed up, the Font Awesome icon goes over the font for some reason... Can anyone make any sense of this?
Before Hover
After Hover
It was the default bootstrap padding that was to blame for the problem
Related
I have a btn-group on this page, in the My Physical Product section's cards, the text in the button must be gradient but if it's impossible, normal text color is ok. It's not visible, check it here.
it must be like this on light and dark all browsers' view
It works on every device/browser, except iPhone-safari and iPad-safari, I couldn't fix this because I don't have macOS.
Notes:
the body tag has the browser name (the browser that you've opened the
site in)
I didn't publish the code here because I can't check if it
not working on safari, and I can't publish the whole site here
there's a dark layout on the website, please fix the text in both the dark and light layouts
you can see how I want the text to be like from any other browser/device from here, just for better understanding
I have a btn-group on this page, in the My Physical Product section's cards, the text in the button must be gradient but if it's impossible, normal text color is ok. It's not visible, check it here.
it must be like this on light and dark all browsers' view
It works on every device/browser, except iPhone-safari and iPad-safari, I couldn't fix this because I don't have macOS.
I have some photos on my wordpress website and for example this cross in the circle gets a weird border around the image but only on some resolutions (e.g. width:1506). I tried inspecting the element and there is no CSS border in there. Somehow this border appears around many images for some reason at specific resolutions and I can't seem to find out why since there isn't any CSS stating that this border should appear.
Also looked in dev tools at Computed for this img and it says border:0; and I also set it 0 again myself but this still appears.
Any help would be appreciated!
Found the answer. I had a .webp image which was mostly transparent and a background was set to make it purple. On some resolutions that box appeared with the color of the background. The solution I took, was make the webp directly purple and saved it as a png and replace the old one.
Text rendering on the navbar, at least on Yosemite's Safari and Firefox, is very bad. Text doesn't show the curve it has but is like thicker and more imperfect.
If I zoom in the webpage, it improves, also if I force focus at any element.
I wouldn't care much about this if it were always regular, but the problem is with the focus. The page doesn't seem to be well designed, and I don't like that impression at all. I'm using Bootstrap framework with Ubuntu typography. This happens at a font-weight:500.
Example http://www.bootply.com/Ptp4gXpHAF. Just click the search bar.
This is the difference between what I want and what is rendered:
The image shows blurred due to upload resolution but I think there is a big difference.
I just changed the font-weight to 300. Maybe safari tried to render to higher font weight but when I clicked on it the font-weight property was overridden. Within setting it to 300 it worked just fine.
Getting a weird behaviour for FontAwesome icon font.
Icons do show up on a page load, but when I'm flipping between the tabs and going back to the original page, icons might appear as white squares (not every icon, just some). When hovering mouse over them, they are back to normal display.
I'm loading the font via CDN:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
I guess white squares are from FontAwesome CSS, the browser having troubles to recognise the character:
.fa-facebook:before {
content: "\f09a";
}
I'm a bit lost why it is keep happening after switching tabs. The font seems to be loaded, as on the first load I can see the icons. Might it be a conflict with other CSS?
Need some suggestions where to look for a root cause.
I was brought to your question, because we have been experiencing the same thing on our site with the Symbolicons icon font.
After doing some research I found out that this happens due to a bug in Chrome. So the issue is not with Font Awesome and I don't think you can do anything for now to fix it. Guess we just have to wait for the fix to hit the stable Chrome version.
Links to the bug discussions:
Issue 336075: embedded fonts unload
Issue 336170: Wrong rendering of Webfonts when loading tabs in background
Hopefully someone can help me figure this one out. I've tried countless things and I can't seem to figure this one out.
Using google chrome, this is what I see. The noticeable part is the icons of the navbar:
and scrolled to the bottom:
As you can see, the font weight is completely different and affected simply by scrolling. This behavior seems to happen only on Chrome on OSX, currently running 23.0.1271.95 (latest)
I have tried to force the weight on the font, with !important even -- it will alter the weight, but as soon as i scroll it will lower the weight for no apparent reasons. Any hints as to what could be causing this problem, and how I can possibly fix this, to ensure my website renders properly everywhere?
Most likely something is causing the browser to disable subpixel font antialiasing after you scroll the text. This could be any kind of CSS transformation, transparency, etc. On OSX, this will make the text look much less bold (see here for more on this: Unwanted Bolding added to font in browsers)
The solution is to pre-emptively disable subpixel font antialiasing. Apply this to your nav bar's CSS:
#navbar {
-webkit-font-smoothing: antialiased;
}