[iOS] iOS png, z-index, opacity, translate 버그

1. 버그 발생 현상

표시된 이미지 부분 CSS가 동작하지 않는 현상

검색해보면 해당 속성들이 존재할때 브라우저들이 인식을 못하는 버그가 존재한다는 글들이 나오며

iOS를 제외한 브라우저들은 해당 현상을 고친것으로 나옴.

iOS는 z-index 말고 transform: translate3d(0,0,1px); 을 사용해서 처리하는 쪽으로 해결책들이 검색됨.

하지만 해결이 안됬음...ㅠㅠ

html

<div class="img_wrap" style="position:relative;z-index:1;opacity:0;transform: translate(0, 0);">

<img src="/common/img/vin/main/banner02_obj1_180831.png" alt="" style="position:relative;z-index:3;">

<img src="/common/img/vin/main/banner02_obj2_180831.png" alt="" style="position:absolute;top:8%;left:0;z-index:1">

<img src="/common/img/vin/main/banner02_obj3_180831.png" alt="" style="position:absolute;top:8%;left:0;z-index:2">

<img src="/common/img/vin/main/banner02_obj4_180831.png" alt="" style="position:absolute;top:7.1667%;left:9.4667%;width:19.4667%;z-index:1;">

<img src="/common/img/vin/main/banner02_obj5_180831.png" alt="" style="position:absolute;top:28.6667%;right:13.6%;width:25.6%;z-index:1;">

<img src="/common/img/vin/main/banner02_obj6_180831.png" alt="" style="position:absolute;top:64.3334%;left:9.6%;width:10.8%;z-index:1;">

</div>

해결방법으로는 

안나오는 이미지만 한번 더 감쌈... ... (왜 감싸고 싶었는지는 미지수...그냥 느낌상...제정신이 아니었기 때문에...)

<span style="position:absolute;top:8%;left:0;z-index:1"><img src="/common/img/vin/main/banner02_obj2_180831.png" alt=""></span>

<span style="position:absolute;top:8%;left:0;z-index:2"><img src="/common/img/vin/main/banner02_obj3_180831.png" alt=""></span>