Javascript 在模板之间切换时未完全重绘文本

在我的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>

综合的
第三方，
消防；盗窃
一次性付款
每月付款
你的网上价格是
{{totalPremium | signedCurrencyFilter}
价格包括{{在线折扣| signedCurrencyFilter}的在线折扣
你的网上价格是
{{installamentamount | signedCurrencyFilter}}
价格包括{{在线折扣| signedCurrencyFilter}的在线折扣

因此，因为每当屏幕调整大小或需要重画时，浏览器都会纠正此问题，所以每当选择这些选项时，我都必须强制重画。最好的方法似乎是克隆元素，并用克隆替换原始元素，以强制重画，这包含在超时中，以便将其发送到执行队列的末尾

这个答案有助于：

---

我对建议的解决方案的编辑是使用不透明度属性而不是显示，因为显示更改会导致抖动/故障/闪烁，看起来非常糟糕。不透明度只会导致轻微的褪色。

你能提供一个解决方案吗？不确定可复制性，据我所知，这只发生在iPhone上，但我可以布置模板的骨骼？

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