Текст не полностью перерисовывается при переключении между шаблонами

Question

В моем приложении AngularJS у меня есть вид, который позволяет мне переключаться между типами страховой защиты, и она отлично работает. Однако, в частности, iPhone (Chrome & Safari), текст переключается, когда я переключаюсь между ценами. Чтобы быть очень ясным, это только верхние несколько пикселей, и эти пиксели обычно принадлежат к цене, на которую переключаются, так что страница перерисовывается неправильно. Эта проблема исчезнет, ​​если я сделаю что-нибудь в инструментах разработки. Любая помощь здесь приветствуется.

РЕДАКТИРОВАТЬ: Это происходит, только когда я выбираю параметр, который обновляет отображаемое значение, а не когда он переключается на другой фрагмент шаблона.

Вот скриншот

И немного урезанная версия рассматриваемого шаблона:

<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

Так как браузер исправлял этот сбой всякий раз, когда размер экрана изменялся или приходилось перерисовывать, я вынужден был перерисовывать каждый раз, когда выбирались эти параметры. Лучший способ сделать это, казалось, состоит в том, чтобы клонировать элемент и заменить оригинал клоном, чтобы вызвать перерисовку, это было заключено в тайм-аут, чтобы отправить это в конец очереди выполнения.

Этот ответ помог с этим: { ссылка }

 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);

Мое редактирование предлагаемого решения состоит в том, чтобы использовать свойство непрозрачности, а не отображение, потому что изменение отображения вызывает дрожание / glitch / fla sh, который выглядит очень плохо. Непрозрачность просто вызывает небольшое затухание.