I noticed a strange bug (at least on WebKit) on a website I designed with custom fonts (via Typekit) and CSS columns. The text has some additional font feature settings ("calt", "liga", "clig", "kern", "onum") which I've discovered to be the trigger.
The columns have column-width and column-gap settings. When the browser window is resized so that only one column can be displayed, text is not displayed correctly (see attached pictures). I figure that the length of the paragraph is calculated before kerning and/or ligatures are applied, thus forcing some text to display outside of its container. Disabling the font feature setting clears the unwanted effect.
Is this a bug? Has anyone noticed this behavior before? Is there a known solution?
Related
I'm experiencing weird artifacts on Google Chrome 61 on Linux.
There are some strange boxes rendered on many pages:
Example 1:
Example 2:
Note: I changed the background color of the body #444954 to make the boxe more visible, you can try by yourself on this page with the chrome devtools: https://bitbucket.org/account/signin/.
You should see a single color on the whole background.
These boxes are not DOM elements and are often visible on large colored backgrounds. Usually It seems to surround elements of the page (very visible on the screenshot) and are always at the same place on a single page. So I think the position of the boxes are directly related to the content.
This is not a monitor issue, I've 3 different monitors and boxes are visible on all screens.
What I've tried:
Remove chrome extensions
Reset chrome settings
Installed prior Nvidia drivers.
Didn't changes anything.
I do not know if it's related, but I've another unresolved issue with Chrome Colors: Weird colors on Chrome/Linux
Thanks for your help
I had this problem as well, try to add the style rule on the background layer:
backface-visibility: hidden;
I have a page, all styles are authored using em unit for sizing. I am facing a strange issue in IE9.
I have a requirement to have custom zoom buttons. By clicking on that button, I am increasing the font-size of body. Eg from 1em to 2em and all child elements gets the higher inheritance and zoom is applied.
But whenever zoom is applied, texts are hidden in SELECT and INPUT fields. This gets fixed as soon as you interact with that element - that is as soon as you focus the cursor on that element, everything looks okay.
See this picture:
What could be the issue? How I might fix it?
Please note, I tried making a JS fiddle, but no success on reproducing the issue. A clone of what I have in real app can be seen here: http://shekhardesigner.github.io/IE9-EM-Sizing-ZOOM-Issue/
Make sure you have correct Standard Doctype Rendering, also you could add
"<meta http-equiv="X-UA-Compatible" content="IE=Edge" />" inside the head tag. It helps to display the webpage in edge mode, which is the highest standards mode supported by Internet Explorer, from Internet Explorer 6 through IE11.
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.
I'm working on a web page that will run in IE7+ and support English and Japanese language, and I have a little problem with the font size.
On my development machine I'm using IE 9 and I also have 2 other test machines with IE8.The webpage has the X-UA-Compatible set to IE=7.
I have to allow in a span element , that has a fixed width and height, only 12 Kanji characters.
And I've thought to set the overflow of the span to hidden, and set the font size, by trial and error, so that the 12 Kanji characters will fit in the span on 2 rows.
I change the language to Japan[ja-JP] form internet options, and on my dev machine it looks how i what it, and the same goes for one of my testing machines, but for the other test machine the font size is a little bigger. The TextSize and Encoding are the same in all browsers.
I've tried setting the font size in px, em and pt, but the difference in the visual size of the font is still there.
Any thoughts on what might be the cause of this?
You cannot do this, because you cannot know what fonts will be installed on the end-users pc. Of course you could make a good guess (if you're specifically targeting IE7, chances are there are fonts that are available anyway).
But even then, it could depend on dpi settings of the user. Also, decent browser allow you to adapt font sizes without zooming the screen. So you will have to find a size that works in 95% of the cases, and leave some margin.
If you really need it pixel-perfect, you need an image instead of text (though I would still advise against it). Just embrace the fact that you cannot 100% say what a page will look like on the client.
If it is a browser based problem, then it can be fixed by detecting which browser/version it is, then add a CSS script (use Javascript to do this) depending on which browser it is, with each CSS script containing a different value for the font-size etc.
(BTW I can't help you apart from that, you will need to do further research elsewhere)
You should use an image instead of text. You can generate it on the fly using server's fonts.
Sincerely hope someone can provide solution for this.
Normal zooming by holding Ctrl + Scroll (or +/-) is useful but it just doesn't work in certain part of some sites.
For example:
http://www.freemalaysiatoday.com/category/living/2012/04/02/malaysias-top-rock-act-blister/
As you can see, zooming in and out has no effect at all to the text in the comments using facebook account. This problem only happen to Chrome but not IE or firefox.
No matter how large other font becomes, the size of the font (yes, font only) in comments remained unchanged and this is annoying.
Any solution please?
Look at:
http://code.google.com/p/chromium/issues/detail?id=104083
It can be achieved with the css rule -webkit-text-size-adjust: none;.
If one wants to disable it, the link also contains a solution in step 8, using an extension CSS rules are inserted in all pages which override this