6

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...

border white bug

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?

Christophe Roussy
  • 16,299
  • 4
  • 85
  • 85
Alex
  • 2,927
  • 8
  • 37
  • 56
  • 1
    Nice project. These artifacts may be some issue with alpha/blending of the texture edges, you see this in some games too, see this http://answers.unity3d.com/questions/10302/messy-alpha-problem-white-around-edges.html – Christophe Roussy May 26 '16 at 08:52
  • 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. – Bram Vanroy May 26 '16 at 08:58
  • Maybe duplicate of: http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome – Christophe Roussy May 26 '16 at 08:59
  • 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. – Jonas Grumann May 26 '16 at 09:02
  • 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? – Jonas Grumann May 26 '16 at 09:04
  • @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 :( – Alex May 26 '16 at 09:05
  • On the screenshots those white borders are clearly visible, I thought that was the issue. – Christophe Roussy May 26 '16 at 09:07
  • @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. – Alex May 26 '16 at 09:07

1 Answers1

0

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';
    }
    };
}]);
maheshv13
  • 133
  • 9