SmoothCorners is not applied when positioned inside an anchor tag

[sungik-choi]

현재상황

a 태그(react-router의 Link 컴포넌트 포함) 안에서 smooth-corners가 동작하지 않는 문제.
체크해보니, 정상적으로 스크립트 register는 되지만(registerPaint('smooth-corners', SmoothCorners)) 스크립트 내부의 paint 메서드는 실행되지 않는 걸 확인했음.

개발자 도구로 확인 시 background: paint(smooth-corners), --smooth-corners 정상 적용되는 것도 확인. 앵커 태그의 내부 구현과 CSS Paint Worklet 이 어디선가 충돌하지 않나 생각됨.

결론

관련 이슈: w3c/css-houdini-drafts#791

크로미움에서 링크에 paint()를 적용 시, 방문 정보가 누출될 위험이 있어 문제가 해결될 때까지 모든 앵커에 대해서 Paint Worklet을 비활성화하도록 결정했다고 합니다.

This is actually intentional, to mitigate with a privacy leak that could happen if one were to paint :visited links. Here is a specs issue discussing this.
Basically an evil website could tell which link has been visited by applying a paint() only for such links and check if the PaintWorklet has been called.
So the current solution Chrome's team came with was to simply disable the PaintWorklet for all anchors with an href attribute, that is until the root problem gets properly addressed (but this will take time).

참고

• 스택오버플로우

재현 방법

자손, 자식 관계에 상관없이 smooth-corners를 사용하는 컴포넌트(21-06-23 기준 현재는 Avatar만)가 앵커 태그 내부에 위치할 경우 이미지가 투명하게 보임.

기대한 동작

이미지가 잘 보여야 함.

실제 동작

투명하게 보임.

Reference

[sungik-choi]

• border-image-source 에 관한 문제는 아님. 다른 를 사용하는 CSS 속성을 써도 동일한 문제 발생.
• 다른 Paint Worklet 을 사용한 예제에서도 앵커 태그로 감쌀 시 동일한 문제가 발생하는 것 확인함.
• https://stackoverflow.com/questions/68094490/paint-worklet-doesnt-working-in-anchor-tag
• 크로미움 브라우저의 버그로 보이고, 당장 해결법은 a 태그 전체를 감싸거나, Link 컴포넌트 대신 onClick으로 히스토리를 푸시해주는 방법밖에 없어 보임.

[inhibitor1217]

중복 w/ #498

[sungik-choi]

중복 w/ #498

확인 감사합니다! #498 Close 했습니다