Text not fully redrawing when I toggle between templates

Question

On my AngularJS app I have a view that allows me to toggle between type of insurance cover and it works fine. However on iPhone in particular (Chrome & Safari), the text kind of scrambles when I toggle between the prices. To be very clear about it, it's only the top few pixels and those pixels generally belong to the price toggled away from, so it's like the page isn't properly redrawing it. This issue then goes away if I do anything in the Dev tools. Any help is appreciated here.

EDIT: This appears to only happen when I select an option that updates the value displayed, not when it switched to a different piece of template.

Here's a screenshot

And a slightly stripped down version of the template in question:

<div class="row quote-tab-container">
<div class="col">
    <div class="quote__tab">
        <button ng-click="selectedCoverType = 'Comp'; setCoverDetails()" class="quote__tab__button">
            Comprehensive
            <div class="active-selection" ng-show="selectedCoverType === 'Comp'"></div>
        </button>

        <button ng-click="selectedCoverType = 'Tpft'; setCoverDetails()" class="quote__tab__button">
            Third Party,<br />Fire &amp; Theft
            <div class="active-selection-tpft" ng-show="selectedCoverType === 'Tpft'"></div>
        </button>
    </div>
</div>
</div>
<div class="quote-details  row">
    <div class="col">
        <div class="answer--radio">
            <input ng-click="paymentType = 'CC'" type="radio" ng-checked="paymentType == 'CC'" id="singlePayment" name="payment-type">
            <label for="singlePayment">Single Payment</label>
        </div>

        <div class="answer--radio answer--radio--right">
            <input ng-click="paymentType = 'DD'" type="radio" ng-checked="paymentType == 'DD'" id="monthlyPayments" name="payment-type">
            <label for="monthlyPayments">Monthly Payments</label>
        </div>

        <section class="selected-product answer--checkbox" ng-show="paymentType == 'CC'">
            <div class="your-online-price">
                Your online price is
            </div>
            <div class="selected-product__price">
                {{totalPremium | signedCurrencyFilter}}
            </div>
            <div class="selected-product__includes">
                Price includes online discount of {{onlineDiscount | signedCurrencyFilter}}
            </div>
        </section>

        <section class="selected-product answer--checkbox" ng-show="paymentType == 'DD'">
            <div class="your-online-price">
                Your online price is
            </div>
            <div class="selected-product__price">
                {{instalmentAmount | signedCurrencyFilter}}
            </div>
            <div class="selected-product__includes">
                Price includes online discount of {{onlineDiscount | signedCurrencyFilter}}
            </div>
        </section>
    </div>
</div>

Answer 1

So because the browser would correct this glitch whenever the screen resized or had to redraw I had to force a redraw any time these options were selected. The best way to do this seemed to be to clone the element and replace the original with the clone in order to force a redraw, this was enclosed in a timeout in order to send this to the end of the execution queue.

This answer helped with this: https://stackoverflow.com/a/8840703/1999035

 var n = document.createTextNode(' ');
 var opacity = element.style.opacity;

 element.appendChild(n);
 element.style.opacity = '0.5';

 setTimeout(function(){
     element.style.display = opacity;
     n.parentNode.removeChild(n);
 }, 20);

My edit of the proposed solution is to use the opacity property rather than display, because the display change causes a jitter/glitch/flash that looks really bad.Opacity just causes a slight fade.