Why I've got these white borders with chrome with some resolutions and how to remove them?

Question

I'm playing with CSS rotatations to get a kaleidoscope effect in CSS.

Everything seems good except with Chrome at some resolution (no issue on IE10, I didn't test FF)

I don't know why but sometime I have some weird white borders at the center of the kaleidoscope even if everything seems fine with the rotation values. I can't find any workaround...

You can test a working demo here : http://jsfiddle.net/Lvc0u55v/4519/

You'll probably need to move the slider from jsfiddle to see the white borders displayed.

I'm using this kind of css: transform: rotate(151deg) matrix(-1, 0, 0, 1, 0, 0) with a background image.

Could you help me to remove these borders?

Answer 1

Hope this will help.

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';
    }
    };
}]);