scrollTrigger 모바일에서 이미지가 안 먹혀요 ㅠㅠ

scrollTrigger 모바일에서 이미지가 안 먹혀요 ㅠㅠ

QA

scrollTrigger 모바일에서 이미지가 안 먹혀요 ㅠㅠ

본문

scrollTrigger 사용해서 스크롤시 해당섹션에 왔을 때 이미지와 글자 색상이 바뀌게 구현을 했는데

pc에서는 잘 되는데 모바일 핸드폰(사파리)에서는 이미지 색상이 안 바뀝니다 ㅠㅠ 아시는 분 계신가요 ㅠㅠ

 

var brand_value = gsap.timeline({
        scrollTrigger: {
            trigger: "#main_contents_wr00",
            start: "top-=600",
            end: "bottom-=100% top",
            scrub: 0.5,

        }
    })

        .to("#main_contents_wr00 .text_box .text01 .co_text", {
        color: "#FF9F00"
    })
        .to("#main_contents_wr00 .text_box .text .co_icon01 > img", {
        filter: "brightness(1) invert(0)"
    }, "-=0.5")
        .to("#main_contents_wr00 .text_box .text02 .co_text", {
        color: "#FF9F00"
    })
        .to("#main_contents_wr00 .text_box .text .co_icon02 > img", {
        filter: "brightness(1) invert(0)"
    }, "-=0.5")
        .to("#main_contents_wr00 .text_box .text03 .co_text", {
        color: "#FF9F00"
    })

        .to("#main_contents_wr00 .text_box .text04 .co_text", {
        color: "#FF9F00"
    })
        .to("#main_contents_wr00 .text_box .text .co_icon03 > img", {
        filter: "brightness(1) invert(0)"
    }, "-=0.5")

 

 

소스입니다 ㅠㅠ 

이 질문에 댓글 쓰기 :

답변 2

모바일 Safari에서 이미지 색상이 바뀌지 않는 문제는 `filter` 속성에 대한 Safari의 알려진 문제 때문일 수 있습니다. Safari는 `filter` 속성을 지원하지만 일부 필터 값에는 제대로 작동하지 않습니다. 이 문제를 해결하려면 `filter` 속성 대신 `color-filter` 속성을 사용하세요. `color-filter` 속성은 Safari에서 더 잘 지원됩니다.



// 기존 코드 생략 ...        
        .to("#main_contents_wr00 .text_box .text .co_icon01 > img", {
        colorFilter: "brightness(1) invert(0)"
    }, "-=0.5")
        .to("#main_contents_wr00 .text_box .text .co_icon02 > img", {
        colorFilter: "brightness(1) invert(0)"
    }, "-=0.5")
        .to("#main_contents_wr00 .text_box .text .co_icon03 > img", {
        colorFilter: "brightness(1) invert(0)"
    }, "-=0.5")

// 기존 코드 생략 ...

#main_contents_wr00 .text_box .text .co_icon02 > img

이미지가 SVG 인가요?

https://developer.mozilla.org/ko/docs/Web/CSS/filter
- 사파리에서 SVG 객체에는 필터를 사용할 수 없습니다, 선택자를 변경하세요. 

​​​​​​​도움이 되셨다면 채택 한번 부탁드립니다^^

답변을 작성하시기 전에 로그인 해주세요.
전체 138
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT