애니메이션 GIF: 멈춰 주세요!

이 작업은 완료 및 병합되었으며, 애니메이션 이미지는 라이트박스로 표시되지 않습니다. 위의 예시가 업데이트되었습니다(이 변경 사항을 적용하려면 기존 게시글을 다시 빌드해야 합니다).

곧 백포트할 예정입니다.

8개의 좋아요

이 주제는 4일 후 자동으로 닫혔습니다. 더 이상 답변을 작성할 수 없습니다.

재밌는 건데, 스포일러가 제거된 GIF를 재생하는 건 불가능합니다:

american psycho glitch GIF by u̶͛͗̽ n̵͇ͨ g̵̼͂ l̵᷅ t̵̄ c̵̃͘ h̵͚ m̵͇͑e͔

7개의 좋아요

완전히 관련은 없지만, 스포일러 처리된 이미지에서도 비슷한 문제를 본 적이 있습니다. 이미지를 공개하고 싶은 것뿐인데, 클릭하면 동시에 풀사이즈 이미지가 팝업으로 뜨는 경우가 있거든요. 물론 gif 문제와는 직접적인 연관은 없지만, 스포일러 태그 뒤에 있는 이미지를 클릭하는 것과 관련이 있어서 언급해 보았습니다.

2개의 좋아요

정말 재미있는 제안이네요! 이를 해결하는 한 가지 방법은 스포일러 요소 안의 라이트박스 및 애니메이션 이미지 일시중지를 비활성화하는 것입니다. CSS만으로도 매우 쉽게 할 수 있습니다:

.spoiled {
  img.animated,
  .lightbox {
    pointer-events: none;
  }
}

또는 라이트박스와 애니메이션 일시중지가 콘텐츠가 흐림 해제된 상태에서만 적용되도록 할 수도 있지만, 스포일러가 토글 방식이기 때문에 이는 작동하지 않습니다. 하지만 스포일러 동작을 클릭 시 흐림 해제 후 종료되는 일방향 방식으로 변경하기로 결정한다면, 이 방법도 작동할 수 있습니다.

4개의 좋아요

저는 그렇게 하지 않는 것을 강력히 권장합니다. 개인적으로 게시글을 검토할 때(미리보기 단계와 게시 후 모두 포함) 모든 부분을 적절히 흐림 처리했는지 확인하려면 토글 기능이 정말 중요하다고 생각합니다. 만약 일방향으로만 작동한다면, 오탈자를 실제로 검토하기 위해 텍스트의 흐림을 해제한 후에는 흐림 위치를 다시 확인하려면 페이지를 새로고침할 수밖에 없게 됩니다. 그리고 저는 종종 여러 번 이렇게 합니다(수정을 가하면서) 때문에, 매번 새로고침해야 한다면 매우 불편할 것입니다.

그러나 말씀하신 것이 이미지 흐림 해제를 일방향으로만 하자는 것이라면, 큰 문제는 아닐 것입니다. (댓글을 읽기 전에 제 답변을 먼저 올렸기 때문에 일부 맥락을 놓친 것 같지만, 이미지에는 그렇게 중요하지 않더라도 토글 기능의 일반적인 유용성을 강조하는 것이 나쁘지는 않을 것입니다.)

3개의 좋아요

@cvx 님이 스포일러 요소에 대한 수정을 구현했습니다. 자체 클릭 동작(라이트박스, 애니메이션 GIF, 링크, 동영상, 입력 필드 등)이 있는 요소에 대한 흐림 처리는 일방향입니다. 자세한 내용은 이 커밋을 참고하세요.

미리보기에서는 스포일러를 토글할 수 있습니다. 게시글에서는 이미지 옆 공간에 클릭하면 다시 흐리게 처리할 수 있는 우회 방법이 있습니다. 위 Kris 님이 게시한 애니메이션 이미지에서 이 기능을 직접 시도해 볼 수 있습니다.

9개의 좋아요

화면이 세로로 고정된 상태에서는 이미지 옆에 빈 공간이 없어서 제 iPhone 8에서는 작동하지 않습니다. 하지만 이 문제를 해결할 좋은 대안이 떠오르질 않네요. 전반적으로 합리적인 해결책이라고 생각합니다.

4개의 좋아요

정말 멋진 기능입니다, @pmusaraj 감사합니다 :conf

5개의 좋아요