Got a quick query about some text on my slider on a website I'm making. It's been puzzling me because it only happens in Chrome, when the slide loads it will output the Title from wordpress. As the page loads it renders the font as how it should then a split second later it gets more font weight it seems.
I'm wondering what the issue is?
Just check any of the text on the slides in Chrome. Would be great to know why!
Thanks.
edit* added an image.
known issue in Chrome fixed in latest development builds.
It is a temporary workaround you can also try.
After a little bit of looking around I found that if I add
-webkit-font-smoothing: antialiased;
To my headings it seems to fix my issue. I will mark this as resolved. Thanks everyone.
Related
I've got a serious problem on safari browsers with this website
http://daskommunikationsstudio.at/
the problem is that it seems the text is not shown correctly and since i don't own an apple
i've got no real experience with safari.
maybe someone can give me a hint.
thanks a lot
andy
Looks like a font rendering issue. Changed the font-family, eventually you can use different font for Safari.
I should start by saying I'm no expert when it comes to code and web design. That said, I have recently upgraded to OS X 10.9 Mavericks. After updating I'm experiencing a weird bug, specifically on my website and others like it using the wordpress theme WPfolio Two. When you hover over a link, the link jumps and drops to the next line. As soon as you move your mouse away from the linked text the text link hops back up to the line it's supposed to be on. This only happens using Chrome or Safari, it does not seem to happen in Firefox. For an example hover over any link on on either of these two pages http://jasonirla.com/category/news/ or http://notlaura.com/wpfolio-two/read-me/ Thie bug does not seem to effect drop down navigation menus or some (but not all) links in sidebar widget menus.
The bug makes it practically impossible to click the jumping link. I'm not experienced enough to say if this is a browser bug, a OS X bug, a problem with the code in the wordpress them I'm using or what. I am comfortable editing and writing small additions to the theme code using a child theme CSS but in this instance I have no idea where to start or what I'm looking for (to fix). All I know is that this problem did not occur when I was still running 10.8 mountain lion on my mac.
If anyone has any experience with problem like the one I'm experiencing and could offer me some advice I'd really appreciate any help you can offer. I've been searching all over for a week now and haven't been able to find any answers and nothing I've tried seems to make a difference. Thank you for any help or advice you are able to offer.
Can't leave a comment, so I hope this will help you:
Check your font-style on this hover link, is it bold on hover?
Do you use another font-size on hover?
Do you use a iOS compatible font on hover? (using a font that only works on windows systems will be transformed on iOS devices and could cause this bug.
I was contacted by the designer of the WP theme (WPfolio Two), there's a style on 193 of the CSS "display:compact" which is the problem. I put block comments around that line /* display:compact */ and the bug is fixed. Thanks for the initial help #lickmycode – user1544398 just now edit
I was looking at a friends website and noticed most of the text has the bottom cut off but only when viewing in chrome. I poked around in the css but couldn't seem to find the issue.
Can anyone help me out?
The site is http://www.customcasez.com/
The same issue exists here, Bubbler+One font (at least for me in chrome).
here is an image about how it looks at my place.
So, I guess the issue is not with your website but with the font itself.
Try replacing the font-family with some similar font or try to download it from another source
I've had the same issue. Text in input box looked fine in Firefox however it was cut off from bottom in Chrome.
Check with padding of the input box, it is smartly managed in Firefox but not in Chrome!
I gave padding as padding:0px 6px; (or whatever you intend to give!)
Unfortunately I can't reproduce this in a JSFiddle or otherwise, when I do it simply works properly. From there I still was not able to narrow it down to figure out what is causing it. Here is the link to the development site:
http://dev.fusion-inc.net
This bug is only visible in Chrome, I am using the latest version, and the problem still appeared on the previous version (I just updated this morning).
Watch the links in the content of the home page carefully, when the image slider transitions, you will see a change in the text of the links. It's almost as if the anti-aliasing changes somehow and causes the text to become just a smidge thinner. You may need to zoom in to see it well.
Any idea what's causing this? I'm completely stumped, the only thing I can figure is something in the rendering of the animation of the slider is tweaking some anti-aliasing or something causing the fonts to move a bit. Even the youtube and linked in images in the footer have the same problem.
#content * {-webkit-backface-visibility: hidden;}
The above fixed it thanks to someone in Chat.
Similar problems should reference this link: Prevent flicker on webkit-transition of webkit-transform
I just started coding my own website, and since I love typographic web design I was trying to use a really big custom font for the logo. Unfortunately during my testing on Safari using a MacBook Pro with Retina displays I noticed that there were some artifacts in the font rendering :/ First I thought there was some mistake on my part, but then I discovered that it happens with any font if it is big enough...
This behavior is visible on websites like http://fittextjs.com where the outline of the title is not correctly rendered. For anyone without a retina display here's a screenshot of what I'm talking about http://cl.ly/JL0j
Odd enough this strange bug isn't present on Chrome, and since they're both Webkit based I thought that maybe the latter is using a CSS default that renders text correctly.
Any CSS guru that knows how to solve the situation before me filling a rdar :) ?
UPDATE: I should note that I already tried using -webkit-font-smoothing: antialiased; and it doesn't work :/
I filled a radar about it yesterday and got an answer today (never got a response so fast!).
Apple engineers are aware of it and consider it a serious bug, so I hope it'll get fixed soon. In the meantime there's no workaround available apart from using images :/