css - Inner Shadow getting aliased when skewed -

as shown in pic, inset shadow becomes aliased when use

-webkit-transform: skew(10deg); 

it occurs both on chrome , in firefox, there work-around?

screen print:

    #blockoutside {  	  background-color: #cfcfcf;  	  padding: 5px;  	  padding-left: 3px;  	  padding-right: 3px;  	  height: 25px;  	  width: 15px;  	  -webkit-transform: skew(10deg);      }      #blockinside {  	  background-color: gray;  	  width: 100%;  	  height: 100%;    	  -webkit-box-shadow: inset 0 0 5px black;      }

<div id="blockoutside">    <div id="blockinside"></div>  </div>

this due transform getting applied on parent element. there no way rid of can remove significant extent making back-face hidden , adding translatez(0) (like mentioned in woodrow barlow's comment). transform not cause undesired effects because translating 0px.

backface-visibility: hidden; transform: skew(10deg) translatez(0); /* translatez(0) added */ 

note: backface-visibility property need browser prefixes. have used prefix-free library in snippet avoid writing prefixed versions.

#blockoutside {    background-color: #cfcfcf;    padding: 5px;    padding-left: 3px;    padding-right: 3px;    height: 50px;    width: 30px;    transform: skew(10deg) translatez(0);    backface-visibility: hidden;  }  #blockinside {    background-color: gray;    width: 100%;    height: 100%;    box-shadow: inset 0 0 5px black;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>    <div id="blockoutside">    <div id="blockinside"></div>  </div>

---

additionally, add invisible 1px border in below snippet , evens out jagged edges more. note add bit of blur effect edges less jagged above snippet. use or ignore option based on needs.

#blockoutside {    background-color: #cfcfcf;    padding: 4px 6px 6px 4px;    height: 50px;    width: 30px;    transform-style: preserve3d;    transform: skew(10deg) translatez(0);    backface-visibility: hidden;    border: 1px solid transparent;  }  #blockinside {    background-color: gray;    width: 100%;    height: 100%;    box-shadow: inset 0 0 5px black;    border: 1px solid transparent;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>    <div id="blockoutside">    <div id="blockinside"></div>  </div>