Perch:before inside Perch:if issue

USING Perch: 2.8.15, PHP: 5.4.26,

For some reason the content between my <perch:before> and <perch:after> tags is not working when they are within a <perch:if>?

If I remove the the <perch:if> code then before/after content shows. If I add the <perch:if> code back only the code in the middle shows?

This is my template. It is called in using perch_content_custom.

<perch:if exists="featured">
<perch:before>
<div class="banner">
      <div class="row">
      <div class="col-xs-12">
        <h2 class="text-center">Featured Products</h2>
          <div class="owl-four owl-carousel">
</perch:before>
              <div id="da-thumbs" class="da-thumbs item">
              <li><a href="/shop/product.php?s=<perch:content id="slug" type="slug" />">
              <img class="img-responsive product-img" src="<perch:content type="image" id="product-image" label="Product Image" width="200" height="300" crop="true"/>" alt="<perch:content id="productTitle" label="Product Title" type="text"/>" />
              <div>
              <span>
              <p class="brand"><perch:categories id="brand" label="Product Brand" set="brand" required="true" ><perch:category id="catTitle" /></perch:categories></p>
              <h3 class="product"><perch:content id="productTitle" label="Product Title" type="text" /></h3>
              <h4 class="price">£<perch:content id="extra1" type="text" label="Buy from" required="true" /></h4>
              <button class="button orange">View Product</button>
              </span>
              </div>
              </a></li>
              <div class="text-center">
              <p class="brand"><perch:categories id="brand" label="Product Brand" set="brand" required="true" ><perch:category id="catTitle" /></perch:categories></p>
              <h3 class="product"><perch:content id="productTitle" label="Product Title" type="text" /></h3>
              <h4 class="price">£<perch:content id="extra1" type="text" label="Buy from" required="true" /></h4>
              </div>
              </div>
<perch:after>
            </div><!-- /owl-carousel -->
        </div><!-- /col12 -->
      </div><!-- /.row -->
    </div><!-- /.secondary-banner -->
</perch:after>
</perch:if>