Со следующей директивой AngularJS у меня есть проблема только в IE 11, которая, как я думал, была приписана моей директиве, но, похоже, связана с моим положением курсора над текстом ячейки таблицы. Это происходит, когда я прокручиваю вертикально по горизонтали, когда курсор остается над текстом. Я наблюдаю мерцание мыши между вертикальным лучом текста (I) и курсором по умолчанию для стрелки. Когда я перемещаю мышь во время этого мерцания, прокрутка реагирует более плавно.
Когда мышь неподвижна, когда я вращаю колесо, прокрутка таблицы задерживается примерно на 5-6 секунд, прежде чем моя мышь перестает мигать (только над текстом) в ячейке таблицы html, затем она возвращается к нормальной работе, когда таблица реагирует снова .
Что здесь происходит, и как мне решить эту проблему?
Пример Codepen (для просмотра в IE11 откройте в режиме отладки и скопируйте URL в IE11)
https://codepen.io/vahe-jabagchourian/pen/QRGNZy
Template
<div class="container-fluid">
<div ng-controller="ActionController" ng-app="Action">
<init-action/>
ActionItems
<div class="tableheader">
<table id="actionitems" class="table-striped table-condensed table-bordered sortable action grid"> <!--datatable="" dt-options="dtOptions"-->
<thead>
<tr>
<th>
Edit
</th>
<th ng-click="sort('actionitemid')" ng-class="{reverse: reverse}">
ID
</th>
<th ng-click="sort('actionitemtitle')" ng-class="{reverse: reverse}">
Action Item Title
</th>
<th ng-click="sort('status')" ng-class="{reverse: reverse}">
Status
</th>
<th ng-click="sort('critlevel')" ng-class="{reverse: reverse}">
Criticality
</th>
<th ng-click="sort('assignor')" ng-class="{reverse: reverse}">
Assignor
</th>
<th ng-click="sort('owner')" ng-class="{reverse: reverse}">
Owner
</th>
<th ng-click="sort('altowner')" ng-class="{reverse: reverse}">
Alt Owner
</th>
<th ng-click="sort('approver')" ng-class="{reverse: reverse}">
Approver
</th>
<th ng-click="sort('assigneddate')" ng-class="{reverse: reverse}">
Assigned Date
</th>
<th ng-click="sort('duedate')" ng-class="{reverse: reverse}">
Due Date
</th>
<th ng-click="sort('ecd')" ng-class="{reverse: reverse}">
ECD
</th>
<th ng-click="sort('completiondate')" ng-class="{reverse: reverse}">
Completed
</th>
<th ng-click="sort('closedate')" ng-class="{reverse: reverse}">
Closed
</th>
</tr>
</thead>
</table>
</div>
<div class="tablebody">
<table class="table-striped table-condensed table-bordered grid">
<tbody init-table>
</tbody>
</table>
</div>
</div>
<divider></divider>
<div class="msg" layout-align="center">
<span ng-bind-html="msg">{{msg}}</span>
</div>
</div>
Директива
directive('initTable', function(){
return {
restrict: 'A',
//transclude: true,
templateUrl: '/app/tool/action/ActionItemTable.html',
controller: function($scope, $timeout) {
$scope.scrollBarWidth = function(){
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
document.body.appendChild(outer);
var widthNoScroll = outer.offsetWidth;
// force scrollbars
outer.style.overflow = "scroll";
// add innerdiv
var inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
var widthWithScroll = inner.offsetWidth;
// remove divs
outer.parentNode.removeChild(outer);
return widthNoScroll - widthWithScroll;
}
$scope.setMarginsWidths = function(){
$scope.flag = 0;
refresh = 1;
var msie = document.documentMode;
if(refresh){
$timeout(refreshEvery,1);
}
function refreshEvery(){
if ($scope.flag == 0 || window.devicePixelRatio != $scope.devicePixelRatio)
{
$scope.flag = 1;
$scope.devicePixelRatio = window.devicePixelRatio;
var headers = angular.element(document.querySelector('div.tableheader table.grid thead tr')).children();
var cells = angular.element(document.querySelector('div.tablebody table.grid tbody tr:nth-child(1)')).children();
angular.forEach(cells, function(cell, idx){
var cellwidth = cell.getBoundingClientRect().width;
headers[idx].width = cellwidth;
});
}
if (refresh && !msie)
$scope.refreshingPromise = $timeout(refreshEvery,1);
else{
$scope.isRefreshing = false;
$timeout.cancel($scope.refreshingPromise);
}
//angular.element(document.querySelector('html')).attr("style", "margin-right: " + 0*$scope.scrollBarWidth() + "px !important");
angular.element(document.querySelector('div.tableheader')).attr("style", "margin-right: " + $scope.scrollBarWidth() + "px !important");
angular.element(document.querySelector('div.tablebody')).attr("style", "margin-right " + $scope.scrollBarWidth() + "px !important");
}
}
},
link: function (scope, element, attrs) {
scope.init().then(function(){
});
}
}
}).directive('ngRepeatDone', function(){
return {
restrict: 'A',
controller: function($scope, $timeout){
$scope.devicePixelRatio = window.devicePixelRatio;
$scope.setMarginsWidths();
var tablebody = document.querySelector('div.tablebody');
var tableheader = document.querySelector('div.tableheader');
angular.element(tablebody).on("scroll", function(elem, attrs){ //activate when #center scrolls
left = $scope.CommonService.offset(angular.element(document.querySelector("div.tablebody table.grid"))[0]).left; //save #center position to var left
(angular.element(tableheader)[0]).scrollLeft = -1*left + $scope.scrollBarWidth();
});
}
}
});
Видеозапись, показывающая выпуск
