프로모션에서 마우스 커서를 대신해 이미지로 움직일 수 있도록 처리한 영역이 있었다.

대략 이런식

<div class="eventArea">
  <div class="eventImage">
    ... 이벤트 배경 이미지 영역 ...
  </div>
  <i class="cursor"></i>
</div>

.eventArea {
  position: relative;
  cursor: none;

  .cursor {
    position: absolute;
    top: 0;
    left: 0;
    cursor: none;
    ...
  }
}

...
var moveEvent = function(e) {
  $cursor.style.top = e.offsetY - $cursor.offsetHeight / 2 + 'px';
  $cursor.style.left = e.offsetX - $cursor.offsetWidth / 2 + 'px';
};

$eventArea.addEventListener('mousemove', hammerEvent.move);
...

요렇게만 하면 움직일때마다 엄청난 깜빡임을 마주하게 된다.

콘솔에 top과 left 값을 찍어보면 0 이하로 값이 변하는걸 확인할 수 있는데 이벤트 영역(.eventArea)에서 마우스가 움직이는 이벤트가 발생할 때 커서의 위치에 이미지가 올라가도록 처리를 한 것인데 마우스를 움직일 때마다 순간적으로 이 커서 대체 이미지 위로 마우스 커서가 올라가서 이벤트 영역을 순간적으로 벗어나 위치가 바뀌는 현상으로 커서 CSS에 pointer-events: none으로 커서 대체 이미지를 무시하도록 처리하면 이 현상이 생기지 않는다. 하지만 IE 10이하를 고려하면 다른 해결 방법이 필요한 상황.

스크립트 단에서 해결할 수 있는 방법이 있지 않을까 고민했는데 훨씬 더 간단한 해결 방법이 있었다. pointer-events: none의 역할대로 대체 커서 이미지가 움직이긴 하돼 영향을 미치지 않도록 그 위를 가려주면 된다.

최종

<div class="eventArea">
  <div class="eventImage">
    ... 이벤트 배경 이미지 영역 ...
  </div>
  <i class="cursor"></i>
  <i class="wall"></i>
</div>

.eventArea {
  position: relative;
  cursor: none;

  .cursor {
    position: absolute;
    top: 0;
    left: 0;
    cursor: none;
    ...
  }

  .wall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

JS는 동일.