Databases
StackOverflow2013
Postsdbo
POArtifacts on IE10 using CSS3 perspective transform
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POArtifacts on IE10 using CSS3 perspective transform
    text
    copied!<p>I'm experiencing an issue on Internet Explorer 10 when using CSS transform property to change the 3D perspective.</p> <p>Random artifacts appear on the edge of some elements contained in the element with the perspective applied.</p> <p>I've created a simple fiddle to demonstrate the issue: <a href="http://jsfiddle.net/b9ztC/" rel="nofollow noreferrer">http://jsfiddle.net/b9ztC/</a></p> <p>To reproduce, just open the fiddle and try to select, click or play around with the text, this results in the following artifacts appearing/disappearing around the paragraph element:</p> <p><img src="https://i.stack.imgur.com/j3H2e.png" alt="IE10 perspective transform artifacts"></p> <p>More lines and artifacts appear in more complex scenarios, and the cause seems to be the following line of css:</p> <pre><code>transform: perspective(800px); </code></pre> <p>The only ways to solve the issue seem to be:</p> <ul> <li>not to have the perspective applied to the element</li> <li>setting the transform perspective to <code>0px</code></li> <li>use <code>perspective: 800px</code>, instead of <code>transform: perspective(800px)</code></li> </ul> <p>The last one seems an easy solution but it doesn't work well in some scenarios, the following 3D flipping card demo for example (which has the same artifacts problem on the back of the card using IE10) doesn't play well when applying the perspective property separately from the rotation transform: <a href="http://www.cssplay.co.uk/menu/css3-3d-card.html" rel="nofollow noreferrer">http://www.cssplay.co.uk/menu/css3-3d-card.html</a></p> <p>Have anyone experienced this issue? Is there any way to prevent this from happening?</p> <p>I'd also like to know if this happens on every machine or it can be an hardware-related issue.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload