在ng-repeat,bootstrap模式,Firefox中使用的位置固定时闪烁

时间:2014-12-02 16:24:40

标签: firefox modal-dialog fixed flicker ng-repeat

首先,这个问题不会在CHROME或IE中发生。仅限FIREFOX。

我有一张由ng-repeat填充的表格。

在桌子外面,我有一个ui-bootstrap模态弹出窗口和一个固定位置的div。

当我通过单击离开或按Esc按钮关闭/关闭弹出窗口时,如果我再次单击然后弹出窗口完全消失,则固定定位的div会闪烁。

这是一个模仿问题的傻瓜。

http://plnkr.co/edit/Lw9Emlfj7Zayi08agSNd?p=preview

要复制我的问题,请使用firefox,打开三个弹出窗口中的任意一个,然后按Esc或单击离开以关闭弹出窗口。当弹出窗口消失时,再次单击其他位置,并注意顶部固定的div会闪烁。

再次,这个问题不会在CHROME或IE中发生。仅限FIREFOX。

提前致谢。

<div style="position:fixed" >
  Fixed Area
</div>
<br>
<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn btn-default" ng-click="open()">Open me!</button>
    <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
    <button class="btn btn-default" ng-click="open('sm')">Small modal</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>

    <table>
      <tr ng-repeat="item in data">
        <td>{{item.value1}}</td>
        <td>{{item.value2}}</td>
        <td>{{item.value3}}</td>
        <td>{{item.value4}}</td>
        <td>{{item.value5}}</td>
        <td>{{item.value6}}</td>
        <td>{{item.value7}}</td>
        <td>{{item.value8}}</td>
        <td>{{item.value9}}</td>
        <td>{{item.value10}}</td>
        <td>{{item.value11}}</td>
        <td>{{item.value12}}</td>
        <td>{{item.value13}}</td>
        <td>{{item.value14}}</td>
        <td>{{item.value15}}</td>
      </tr>
    </table>

</div>

0 个答案:

没有答案