<!DOCTYPE html>

<html>
<head>
  <title>Shadow test</title>
  <style type="text/css" media="screen">
   .box {
        display: inline-block;
        height: 150px;
        width: 200px;
        margin: 50px;
        border: 1px solid black;
        -webkit-box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.5);
     }

     .compositing {
       -webkit-transform: translateZ(0);
     }
     
     .shadowed {
       font-size: 28pt;
       color: blue;
       text-align: center;
       text-shadow: 0 10px 3px rgba(0, 0, 0, 0.5);
       -webkit-transform: rotate(10deg);
     }
  </style>
</head>
<body>

<p>Left and right sides should look the same.</p>

<div class="box">
  <p class="shadowed">Shadowed text</p>
</div>

<div class="compositing box">
  <p class="shadowed">Shadowed text</p>
</div>

</body>
</html>