[이슈노트] iOS 이슈 모음 #9 (15 이하에서 mask 이슈)

 

 

iPhone X (iOS 15)에서 발생한 X 버튼 표시 이슈 해결

 

빌드: iOS 3.2.6(764)
디바이스: iPhone X (iOS 15)

 

 

 

 

 

 

 

 

 

 

 

(X버튼 영역이 까만 네모가 되어 있다.)

 

 

 

 

최근 iPhone X(15)에서 X 버튼이 검은 사각형으로 표시되는 문제가 발생했다. 

원래는 버튼 영역에 X 모양의 아이콘이 나와야 하지만, 해당 영역이 까맣게 변해 있었다.

이 X 버튼은 button 태그에 svg를 마스크로 활용하여 구현한 것이었는데, iOS 15에서는 -webkit-mask 속성을 추가로 사용해야 한다는 것을 확인했다. (아래 이미지 참고)

 

 

 

 

(can i use)

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

해결 방법
문제를 해결하기 위해 기존에 사용하던 SCSS mixin에 -webkit-mask 속성을 추가했다.

 

@mixin svgfill($c:null, $img:null){
    background-color: $c;
    -webkit-mask: url($urlImg + $img) no-repeat 0 0;
    mask: url($urlImg + $img) no-repeat 0 0;
}

 

 

위 코드에서 보듯이 mask 속성 외에도 -webkit-mask 속성을 함께 적용하면, iOS 15에서도 정상적으로 SVG 마스크가 적용된다.
이렇게 수정한 후, 문제 없이 X 버튼이 정상적으로 표시되었다.

 

 

 

 

 

 

 

 

---

https://caniuse.com/?search=mask

"mask" | Can I use... Support tables for HTML5, CSS3, etc