Transform:translate 로 정렬 시 흐리게 보이는 이슈 해결하기

WHY?

  • 조건
  • 1. 2배 이미지 이미지 사용하는 경우
  • 2. width/height가 홀수인 경우
  • 3. 출력되는 모니터가 4k가 아닌 경우

HOW

  • 1. transform:translate(calc(50% - 0.5px, 50% - 0.5px)) 적용
  • 2. trasnform:translate3d(0, 0, 0) 적용 [가속화 방법]
  • 3. will-chage 적용 [가속화 방법]

결과물(홀수 아이콘)

width: 15px / height: 15px 의 아이콘


  • 1. margin: -7px 0 0 -7px;
  • 2. transform: translate(-50%, -50%) translate(-.5px, -.5px);
  • 3. transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));
  • 4. transform: translate(-50%, -50%);
        will-change: translate;
  • 5. transform: translate3d(-50%, -50%, 0);
  • 6. width: 16px;
        height: 16px;
        transform: translate(-50%, -50%);

결과물(짝수 아이콘)

width: 14px / height: 14px 의 아이콘


  • 1. margin: -7px 0 0 -7px;
  • 2. transform: translate(-50%, -50%) translate(-.5px, -.5px);
  • 3. transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));
  • 4. transform: translate(-50%, -50%);
        will-change: translate;
  • 5. transform: translate3d(-50%, -50%, 0);
  • 6. width: 16px;
        height: 16px;
        transform: translate(-50%, -50%);

결과물(svg)

width: 14px / height: 14px 의 아이콘


  • 1. margin: -7px 0 0 -7px;
  • 2. transform: translate(-50%, -50%) translate(-.5px, -.5px);
  • 3. transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));
  • 4. transform: translate(-50%, -50%);
        will-change: translate;
  • 5. transform: translate3d(-50%, -50%, 0);
  • 6. width: 16px;
        height: 16px;
        transform: translate(-50%, -50%);