Background-clip과 flex 속성을 같이 사용시 작동 안됨(a.k.a Bug)

나의 개발환경은 윈도우 intel CPU 조립식 컴퓨터 크롬브라우저이다. Cross browsing을 위해 iphone 디바이스에서 safari로 더블체크를 한다. 이 환경에서 아래의 코드는 문제가 없었다. (strong태그에 그라데이션 텍스트 스타일링을 해줬다.)

 

&-content {
      @include text-style(14, $dark);

      .blog {
        strong {
          @include inline-flexbox(start);
          overflow: hidden;
          color: transparent;
          -webkit-background-clip: text;
          background-clip: text;
          background-image: linear-gradient(
            180deg,
            #f5e2b0,
            #f5b5b5 10%,
            #db8787 33%,
            #d29bd5 42%,
            #daf5f1 50%,
            #9bd5a6 66%,
            #629363
          );
          background-position: 50% 0%;
          background-size: 100% 300%;
          transition: background-position 1.2s ease-in-out;
        }
      }

 

safari에서 체크했으니까 문제없겠지...라는 생각은 어리석었다. m1 맥북에어 노트북으로 열어보니 strong태그가 투명해 보이는 문제가 있었다. 그라데이션 표현이 안 돼서 backgound-clip, backgound-image를 들쑤셨다. 도저히 해결안되서 하나씩 주석처리 해보니 display: inline-flex가 범인이었다. 나는 flex로 정렬하는 걸 포기하고 vertical-align: text-bottom으로 inline스럽게 icon정렬을 해주었다.

 

두번째 문제는 strong 태그에 텍스트만 보이고 안에있는 i태그 아이콘은 m1맥북에어 크롬,사파리 둘다 적용이 안됐다.

그래서 strong태그에 적용한 스타일링을 i에도 똑같이 적용해 주었고 mouseleave/out animation의 오류를 잡아주었다.

 

윈도우크롬은 backgound-clip이 자식요소에도 영향을 줘서 그라데이션도 보여주는데 맥은 해당요소만 클리핑마스크가 되는 작동원리인가 싶다. 되도록 해당요소만 마크업하고 자식요소로 아이콘 같은걸 넣지 말아야 겠다. png두개를 오버랩한 다음에 width를 조절해 유사한 애니메이션과 시각적차이가 있어서 그라데이션을 포기할 순 없었다. 

 

크로스브라우징은 많은 디바이스에서 테스트해야 정확한 것 같다. IOS, MacOS에서 safari다르고 window, MacOS에서 chrome다르다.

 

테스트를 하려고하니 맥북에어에도 개발세팅을 해줬다. 확실히 터미널 명령어나 호환성에 있어서 달랐다. 이렇게 이것저것 구글링하고 해결하니 토요일이 사라졌다.