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>
source to share
No one has answered this question yet
Check out similar questions: