I've been playing with CSS3 transforms- rotations- and embedded fonts.
Some fonts completely disappear in Chrome when I apply a rotation.
Does anyone know why chrome blows this up?
What makes a font susceptible to this behavior?
Screenshot
So maybe y'all don't think I'm crazy- The text only shows up (kind of) after I try selecting it.
You weren't including the font correctly, try it like this:
http://jsfiddle.net/DFmtJ/1/
(tested on windows XP, Chrome 11.0.696.68 and 13.0.782.220)
------Edit--------
Cried wolf, the font that was being loaded was another one :/, though it is working for me on Chrome as in your first demo.
Related
A button in Chrome vs Firefox:
the baseline in Firefox seems slightly higher for the text. Is there way to lower the text? Just adjusting the margins based on browser?
Chrome CSS:
Firefox CSS:
The fonts were different. Though they are the same in CSS, they weren't being loaded properly so one of the browsers was using a fallback while the other wasn't. To help debug this document.fonts.check is very useful.
Thanks Temani Afif for the pointer in the right direction.
Use normalize.css. Most differents between browser will gone https://necolas.github.io/normalize.css/
Browsers have different base settings. Probably FF default line-height smallest then chrome. Anyway, Nobody find this different in normal using ;)
I've noticed some strange behavior with both Chrome and Safari on my Mac:
Mountain Lion
Safari 6.0 (8536.25)
Chrome 21.0.1180.89
The page is a simple fixed div with some text in it, I added a second div that does a simple CSS translation over 5 seconds so you can easily see the difference. My web app is using CSS transitions to show and hide portions, and while it was doing this large portions of the screen seemed to shift.
I've placed example code and a .mov file out on a server so hopefully you will see the same issue:
http://physicaltable.com/index.html and http://physicaltable.com/CSS_JIGGLE_TEST_2.mov
The strange bolding doesn't occur in Chrome on Windows 7, nor does it happen on the iPad 2 (v5.1.1)
Has anyone else seen this type of issue?
I realize this isn't much of an answer, but I've found that it's mostly because of the rendering of the elements. If the element needs to use hardware or any other type of graphics rendering, it basically takes an image of the text, adjusts it, then rerenders the text (if it can).
The "taking a picture" is where the boldness is lost, since the browser/display/something is adding the flair that makes the text look good. Of course it doesn't look that good, but that's just me.
I've noticed with different colors other than all white/black, it can behave differently. I'm hoping things will get smoothed out as browsers and rendering advances.
I found solution for this bug
its enough simply force your browser to rerender that at moment move is stopped
E.g.
$("your_element_selector").css("color", "color");
where color can be even same color as your text has
For some reason IE9 renders Arial font bolder than other browsers such as: IE7, IE8, Chrome, and Firefox. I have looked for the reason in the CSS but couldn't find anything wrong.
Another thing that happened is that I had word-spacing of 1 or 2 pixels in most of my website, but IE9 showed it too wide, so I made conditional css for it with normal word-spacing.
You can see the difference in the attached screenshot, and also find it in this temporary link:
http://pat.co.il/shirg/matanuziel.com/
Any ideas will be appreciated.
Thanks
The problem is the browser, not your site.
Internet Explorer 9 uses sub-pixel positioned ClearType to render text by using DirectWrite. This can cause rendering differences compared to other browsers and is expected behavior. It can cause text to blur slightly more, just as you're seeing.
As a side note, you should consider using TypeKit if you want to use non-standard fonts and have them render (resonably) well for all users. Note that there will still be minor rendering differences across browsers, probably on the same order of magnitude as what you're experiencing here.
And as Alan stated, using normalize.css is a good idea.
It might be worth looking at normalize.css. I don't know if it'll address your specific issues, but I've found that it's a nice starting point.
Ok, weirdest thing....
Working at home and opened html document in Firefox 3.6 and my link text is wrong colors and looks multi-colored.
Any ideas?
Looks fine in IE, Chrome, Opera and Firefox 3.6 on my work machine.
I mean the difference is shockingly bad.
In this graphic the numbers in parenthesis should be simple light gray (#999) and the link text should be blue (#034ea2). But as you can see its all gone odd, green and yellow and forget the hover states... I am using percentage sizes on the text via CSS - but that shouldn't do this, should it?
This machine does differ from my normal work machine, but I don't think it's a windows setting as the colors look fine in other browsers.
This seems like an old IE problem - so it's freakin me out that good ole FF is doing it to me.
Any ideas?
Windows Cleartype was the problem. Must have been reset on my home machine by any number of Windows updates I've had in the last week. Thanks Joshusman! Sometimes the simplest things are the hardest fixes to find.
Try turning off ClearType in Windows, in case this is some weird subpixel rendering problem.
What you probably need is CSS Pseudo Classes
I have a simple html page in an iframe that I am trying to scale with an html5 input range slider. it creates a white border inside the iframe, what looks to be a doubling side effect.
It works perfect in chrome(6.0.472.59 mac), but not in safari (5.0.1 mac).
here is a link to live demo - http://dl.dropbox.com/u/1031653/safari-bug.html
Any sort of suggestion on why this may be happening? hardcore hacks are fine if need be.
This appears to be a Safari bug. I would recommend reporting it at https://bugs.webkit.org/
I'm seeing this bug in Chrome as well (version 11.x.x)
One solution is to go into the IFRAME's document (assuming you have access) and set the size there. Something like this:
$('iframe').contents().find('body').css('-webkit-transform', 'scale(0.5)');