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?

Calderon

Nice project. These artifacts may be some issue with alpha/blending of the texture edges, you see this in some games too, see this answers.unity3d.com/questions/10302/… – Kantor

You are not talking about the horizontal line and those of the same size, but about the vertical line of the same size (that only is the size of the inner circle in your image), right? Because the former (full width thin lines) are visible on my native full HD screen as well. On my 2K screen it's worse. – Merry

Maybe duplicate of: #6492527 – Kantor

tried Christophe's duplicate and it gets worse if you set it to the container, and it doesn't change anything if you set it to the children. – Churchyard

Oh wait, you're talking about that start in the center of the image and not the thin white lines that go all the the way across the image? – Churchyard

@BramVanroy I'm not sure to get your point, you're mentioning the borders between each sections? They looks negligible on my screen but may be it's not always the case... May be the issues are related :( – Calderon

On the screenshots those white borders are clearly visible, I thought that was the issue. – Kantor

@JonasGrumann the section borders could be negligible, I'm more concerned about the ones in the center. But may be it's related I don't know... In the best scenario I want no artifacts/borders at all. – Calderon

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

Franciskus