Warum habe ich diese weißen Ränder mit Chrom mit einigen Auflösungen und wie man sie entfernt?

Question

Ich spiele mit CSS-Rotationen, um einen Kaleidoskop-Effekt in CSS zu erhalten.

Alles scheint gut, außer mit Chrome zu einer bestimmten Auflösung (keine Ausgabe auf IE10, ich habe nicht FF-Test)

Ich weiß nicht, warum, aber irgendwann habe ich einige seltsamen weißen Ränder in der Mitte des Kaleidoskops auch wenn mit den Rotationswerten alles in Ordnung scheint. Ich kann keine Abhilfe finden ...

Sie Demo hier eine Arbeits testen können: http://jsfiddle.net/Lvc0u55v/4519/

Sie werden wahrscheinlich benötigen Sie den Regler von jsfiddle zu bewegen angezeigt, die weißen Ränder zu sehen.

Ich verwende diese Art von css: transform: rotate(151deg) matrix(-1, 0, 0, 1, 0, 0) mit einem Hintergrundbild.

Können Sie mir helfen, diese Grenzen zu entfernen?

Answer 1

Hoffe, das wird helfen.

var myApp = angular.module('myApp', []); 
myApp.controller('mainCtrl', ['$scope', '$timeout', 
function($scope, $timeout) { 
    $scope.bgImage = 'url(http://www.larousse.fr/encyclopedie/data/images/1310226-Vincent_Van_Gogh_la_Nuit_%C3%A9toil%C3%A9e.jpg)'; 
    var section = 12; 
    $scope.getNumber = function() { 
     return new Array(section); 
    } 
    $scope.getRotation = function(i) { 
     var hasMatrix = false, deg = 0, base = 360/section, rotation; 
     if (i % 2 === 0) { 
      i -= 1; 
      hasMatrix = true; 
     } 
     deg = Math.round(i * base + 1); 
     if (section <= 4) { 
      deg -= 1; 
     } 
     rotation = 'rotate(' + deg + 'deg)'; 
     if (hasMatrix) { 
      // Please updated this line 
      rotation += ' matrix(-1, 0, 0, 1, -1, 0)'; 
     } 
     return rotation; 
    } 
    $scope.mode = 'move'; 
    $scope.onMousemove = function(e) { 
    console.log($scope.mode); 
    if ($scope.mode === 'move') { 
     $scope.bgPosition = e.pageX + 'px ' + e.pageY + 'px'; 
    } 
    }; 
}]);