CODEWITHSUNDEEP
internet-explorer
Aurelin
Aurelin

Reputation: 763

IE cuts off right side of text

I have an element of, say, 1000px width, and inside is some text. The text is displayed fine in all browsers except in IE, where it looks like the right half is cut off, or like the container is too small and has overflow: hidden (but the container isn't too small).

Oddly enough, it seems like I still can mark the text and all. It is just not showing up.

I tested this in IE11/10.

EDIT// I attached a screenshot. screenshot

Upvotes: 3

Views: 4527

Answers (2)

Sampson
Sampson

Reputation: 268344

Update: While this has not yet been resolved in Internet Explorer (or Microsoft Edge), I did want to revisit and share a potential work-around after having this question brought to my attention on 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 being much larger), the page is composed and painted differently. You can see the before and after by comparing the following URLs:

Removing the <div>&nbsp;</div> also appears to resolve this.

I work on the Internet Explorer team and can confirm that this is a bug with Internet Explorer. For the time being, you could remove your (nearly-imperceivable) text-shadow and that should resolve the problem in Internet Explorer.

I have opened up a bug to track the resolution of this internally and will see to it that our Composition team has a look into the matter.

Upvotes: 6

Paolo Mioni
Paolo Mioni

Reputation: 998

I had a similar problem on IE11/Win7 version 11.0.960017691. I was applying the thext shadow to the parent container, the bug gets solved 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 the shadow to h1 and h2 separately, not to the .container DIV.

Upvotes: 0

Related Questions