IE disables the right side of the text
I have an element say 1000px wide and inside is some text. The text renders well in all browsers except IE, where it looks like the right half is cut off or the container is too small and has an overflow: hidden (but the container is not too small).
Oddly enough, it seems I can still mark the text and that's it. It just doesn't show up.
I tested this in IE11 / 10.
EDIT // I have attached a screenshot. 
source to share
Update. While this hasn't been resolved in Internet Explorer (or Microsoft Edge) yet, I really wanted to go back and share a potential workaround after this issue brought my attention to Twitter by another engineer.
body {
text-shadow:
0 0 1em transparent,
1px 1px 1px rgba( 0, 0, 0, .5 );
}
By setting two shadows (the first is much larger), the page is composed and colored differently. You can view them before and after by comparing the following urls:
- Before: https://jsfiddle.net/jonathansampson/96h9czc5/
- After: https://jsfiddle.net/jonathansampson/96h9czc5/1/
Removing <div> </div>
also fixes this.
I am working on the Internet Explorer team and can confirm that this is a bug with Internet Explorer. For now, you can uninstall your (almost incomprehensible) one text-shadow
and fix this issue in Internet Explorer.
I opened a bug to track its internal resolution and will make sure that our roster team looks at this issue.
source to share
I had a similar problem in IE11 / Win7 version 11.0.960017691. I have applied thext shadow to the parent container, the error is resolved if you apply the shadow to individual elements in the container. For example, in:
<div class="container">
<h1>Title</h1>
<h2 class="subtitle">Subtitle</h2>
</div>
Apply shadow to h1 and h2 separately, not to the .container DIV.
source to share