<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css" media="screen">
      
      div {
        -webkit-box-sizing: border-box;
      }
      .reflected {
        position: relative;
        width: 150px;
        height: 100px;
        background-color: green;
        opacity: 0.5;
        -webkit-box-reflect: below -50px;
      }
      
      .composited {
        -webkit-transform: translateZ(0);
      }

    </style>
  </head>
  
  <p>Opacity should be applied after reflection, so you should see a green rectangle below. The overlap between the original and reflection should not be visible.</p>
  <div class="reflected composited">
  </div>

</html>