Flickers when ng-repeat, bootstrap modal, fixed position is used in Firefox

FIRST EVERYTHING, THIS ISSUE DOES NOT PASS IN CHROME OR IE. ONLY IN FIREFOX.

I have a table filled with ng-repeat.

From the table, I have a ui-bootstrap popup and a fixed position div.

When I close / close the popup by pressing the "Esc" button, or pressing the Esc button, if I click again before the popup disappears completely, the fixed positioned div flickers.

Here is a plunker that mimics the problem.

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

To reproduce my problem, use firefox, open any of the three pop-ups and press Esc or click to close the pop-up. While the popup disappears, click again elsewhere and notice the fixed div at the top that will flicker.

AGAIN THIS ISSUE DOES NOT HAVE A CHROME OR IE. ONLY IN FIREFOX.

Thanks in advance.

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

      

+3


source to share





All Articles