Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

IE needs background-color if opacity is used on bold text #159

Open
shapeshifta78 opened this Issue Aug 13, 2011 · 5 comments

Comments

Projects
None yet
4 participants

You can read about the Problem here:
http://jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.html

I think this applies to ie6-8 (win xp, cleartype on), here is a test-case:
http://jsfiddle.net/shapeshifta/5fxhV/

Contributor

nzakas commented Aug 14, 2011

It sounds like you're suggesting a new rule. Can you please summarize the rule and provide sample code in the issue?

Rule: Don't use filter:alpha(opacity=XX) on bolded text without setting a background-color if you are targeting IE6-8.

.noBackground{ filter:alpha(opacity=90);font-weight:700 } /* should produce a warning */
.wBackground { filter:alpha(opacity=90);font-weight:700;background:#fff } /* no warning */

I already provided some sample code in my fiddle: http://jsfiddle.net/shapeshifta/5fxhV/
Have a look at it in ie6-8 on a windows xp machine and you will see the problem. See http://jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.html for more details.

dmcass commented Aug 19, 2011

This rule should probably be altered to include all IE filters. Using any filter on an element that contains text (at any level of descendance) disables ClearType and ruins font-smoothing.

For example:

<div class="transparent">
  <p>This is text in a semi-transparent container!</p>
</div>
<div class="gradient">
  <p>This is text over a gradient background!</p>
</div>
.transparent {
  /* Disables cleartype on element and any descendants */
  filter: alpha(opacity=75);
}
.gradient {
  /* Ditto */
  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#FF000000, endColorstr=#FFFFFFFF);
}

Generally speaking, I'd suggest that filters shouldn't be used. CSS Lint should issue a warning for the filter declaration regardless of value and note that they disable ClearType when the element contains text.

Contributor

stubbornella commented Oct 11, 2011

I've seen some very nutty bugs using filters to simulate gradient backgrounds. It actually causes layout issues like 1px spaces between elements.

dmcass commented Jan 5, 2012

Months later...I'd been intending to add a citation to my above post, but kept forgetting. There's certainly ways of hacking around the filter issues, but in general they tend to create more problems than they solve. I'd still argue that all filters warrant a warning.

Linkage:
StackOverflow
IE Blog

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment