사파리 브라우저에서 height:100% 적용안되는 이슈

 

CSS작업을 하게 되면 만나게 되는 문제 중 대표적인 것이 크로스브라우징입니다.

 

특히 ios의 사파리 브라우저의 경우 문제점이 더욱 많은 상황입니다.

 

사파리 브라우저에서 정상적으로 작동을 하게끔 처리 하기 위하여 @supports 문법을 사용하였습니다.

 

@supports

@supports (-webkit-touch-callout: none)  {
        .userguide-wrap .box{height:auto;}
        .userguide-wrap .boxframe{height:auto;}
}

 

@supports (조건)을 사용하면 특정 조건에 해당하는 상태에서만 css적용이 가능합니다.

 

그중에서도 -webkit-touch-callout: none를 사용하여 사파리 브라우저에서만 적용되는 코드를 구성하였습니다.

height:100%;은 크롬브라우저, 엣지, 파이어폭스에서 문제가 없던 코드로 문제가 발생하는 사파리에서만 대응하는 코드를 작성하였습니다. 

 

위에 제공한 코드가 해당하는 코드이며 height:100%; 에서 height:auto;로 변경하여 수정하였습니다. 

 

일단 height:100%;와 height:auto;의 차이에 대해서 한번 알아 볼까 합니다.

 

height:100%와 height:auto의 차이

https://stackoverflow.com/questions/15943009/difference-between-css-height-100-vs-height-auto

difference between css height : 100% vs height : auto

 

100%는 부모의 영향을 받는 코드입니다.

auto는 자식의 값에 영향을 받는 코드입니다.

 

따라서 내가 어떤것을 기준으로 잡는지에 따라 코드를 사용해야 합니다.

두개가 표현하는 값이 같더라도 적용되는 기준에 따라 표현을 달리해야 한다 생각합니다. 

 

결론

사파리에 적용안되는 css들이 많다! (크로스브라우징 할때 주의하기)