Question

在iPad（Safari）上使用我的表单时，我在jQuery mobile上弹出窗口会遇到麻烦。

我的页面上的弹出窗口完全模糊，当我调整大小或使用我的虚拟键盘时弹出窗口恢复正常。

我的弹出窗口：

    <div data-role="popup" id="popupConjoint" data-dom-cache="true"  data-theme="a" data-position-to="window">
    <a href="#" data-rel="back" data-role="button" data-theme="g" data-icon="delete" data-iconpos="notext" class="ui-btn-right radius">Close</a>

        <div data-role="header" data-theme="e">
        </div>
        <div data-role="content" data-theme="a">

        <div id="popup_Conj_div1">
             <div>

        </div>
            <div id="popup_Conj_div2" style="display:none; text-align : center;" >
            </div> 

            <div id="popup_Conj_div3" style="display:none;">
            </div>
    </div> 
</div>

我的弹出电话：

               $('#popupEnfant').popup();
    $('#popup_Enf_div1').show();
    $('#popup_Enf_div2').hide();
    $('#popup_Enf_div3').hide();    
            $( "#detailassureEnfant" ).popup("open");

see the result

Answer 1

你试过把它添加到css吗？

.ui-popup { -webkit-transform:translateZ(0) }

有人在下面的论坛中提到了类似的问题

http://forum.jquery.com/topic/1-2-popup-picture-gets-blurry-on-my-android-4-0-phone-also-on-the-demo-page

Answer 2

mara-mfa的回答并没有帮助我解决同样的问题。

通过添加：

来解决它

.modal.fade .modal-dialog {
-webkit-transform: inherit !important;
-moz-transform: inherit !important;
-o-transform: inherit !important;
transform: inherit !important;
}

我正在使用ui-bootstrap所以也许这就是我需要另一种解决方案的原因..

jQuery Mobile弹出模糊

2 个答案: