Trying to get Raphael JS to work with IE8.
I am using the text() function to draw some text, which works perfectly in FF3 and Chrome, but not in IE8 (neither compat nor regular IE8).
Other drawing stuff works well in IE8, so I'd guess I am missing some stupid minor detail on how to render text in Raphael.
Oh and this is their latest 0.8.6 version of the library.
Any ideas much appreciated.
Got It!
Can not set font size in em in IE, for some reason. Setting font-size in "px" works perfectly well. Who could have known?...
Related
I have a bespoke font for a client which I converted into a webfont. All went fine, works on my mac and others across Firefox, Safari and Chrome, however when viewed using Windows, the font becomes extremely distorted and unreadable, on any browser.
Does anyone know what could be causing this? Could it be an issue within the original font or is there a code trick I can use to fix this?
It's a hinting problem. Microsoft’s rasteriser tries to align characters to whole pixel grid.
Read: https://www.typotheque.com/articles/hinting
I have been trying to play a bit with the CSS3 and build a Netscape logo purely out of CSS3 for training.
Here is the link:
http://alonbt.com/css3/netscape/
The thing is: In Firefox all looks well, but in Chrome something goes wrong. I assume this is the overflow:hidden I have - in Firefox it works but Chrome doesn't seem to render it well.
Any suggestions bout what might be the problem?
I've detailed this issue here: http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html
In particular, you're being hit by https://bugs.webkit.org/show_bug.cgi?id=50072
The issue shows up in Safari too.
You can workaround this problem if you don't use relative positioning. Try getting rid of the 'position: absolute' CSS property and use negative margins instead (e.g. in your case, something like: 'margin: -204px 0 0 -475px;').
Pay attention however that you'll have to compensate somehow on item ordering (you no longer have control over z-index but you need it).
I had the same problem in Chrome on a Windows computer, a img in a div, with overflow:hidden on the div. On a Mac everything showed fine, but Windows Chrome ignored the overflow:hidden. My solution: -webkit-transform:scale(1); on the img (the child).
I have noticed this weird behavior in firefox, it seems like font have some colorful noise. The example is shown in the image.
Does anyone know how this can be solved? With some CSS media type (which now is screen)?
I'm using firefox 4.0.1.
Any help is appreciated.
You're seeing subpixel font positioning and rendering. I assume that you're on Windows, which is why you only see it with Firefox 4 (and IE9, if you try that). On Mac, Firefox has done this for a very long time.
First off, apologies if this is a simple thing, but I did a search here after googling and came up with nothing concrete: http://stackoverflow.com/search?q=[%40font-face]+print%2C+firefox
I have generated an #font-face kit with font squirrel with two licensed open type fonts. The demo works fine in all browsers except for 1 issue. I want the font to print, and it does for IE, but printing the document in Firefox 3.6.12 & Chrome 8.0.552.215.
Should the FS demo font be printable in FF and GC or is this impossible to do?
Thanks!
I don't think that this is currently possible in firefox, seems to completely disregard the fontface feature.
It's not just this though, seems to disregard background colour css (as do all apart from opera currently).
Spacing seems a little worse in firefox too, more bunched up.
Seems to have an issue with strong tags.
Been having a similar problem and starting to think the issue in with Firefox. A few things seem to point to it being a bug in the 3.6.13 version, but it is also possible that the font file has an invalid cmap problem as Firefox stopped rendering those as of 3.5.4.
More Info:
http://support.mozilla.com/ak/questions/769971
http://support.mozilla.com/sq/questions/761014
invalid cmap problem:
https://bugzilla.mozilla.org/show_bug.cgi?id=526869
They look great in FF, Safari, but the social media icons don't render correctly in IE.
http://www.erisdesigns.net/STAGE/ED1.3/
Is this an IE problem, or something to do with how I'm creating the .pngs?
There's a pngfix javascript add-on you can trigger with an IE conditional statement.
PngFix
<!--[if lt IE 7.]>
I think that it's because you use transparency. Although it isn't as clean as the current solution, you should maybe make everything opaque.