Safari에서 깨지는 CSS 해결

정말 중요한 기획의 퍼블리싱을 맡게 되었습니다.

 

전 페이지의 퍼블리싱을 끝내고 다음 주 월요일이 배포인데 문제가 생겼습니다.

바로 Chrome에서는 정상 작동하는 CSS가, Safari에서는 정상 작동하지 않는 아주 절망적인 상황이 벌어졌습니다.

좌: Safari, 우: Chrome

 

먼저 시간이 없기 때문에 문제 해결을 위해 이전에 작성해 두었던 코드를 분석해 본 결과

      .commonBookingStep1PopUpRequestTimeWrapper {
        font-size: 0.8rem;
        padding: 1.5rem 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        color: #000;
        > :nth-child(1) {
          span {
            color: #d10023;
          }
        }
        > :nth-child(2) {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 0.5rem;
          > :nth-child(1) {
            color: #92979b;
            font-size: 0.75rem;
          }
          > :nth-child(2) {
            font-size: 1.5rem;
            font-weight: 500;
          }
        }
      }

 

 

원인은 자식요소 선택자인걸로 판단되어서 일일이 하나하나 수정하는 와중에 옆에서 같이 야근 중이던 책임님께서 링크를 하나 주셨습니다.

https://www.sassmeister.com/

SassMeister | The Sass Playground!

 

 

이 링크를 받고 이전에 SCSS코드를 CSS 문법으로 변환했던 기억이 있어서 위와 같은 상황에는 적용되지 않을 거라고 믿어 의심치 않았었습니다.

 

하지만 결과는 정 반대로 Safari에서도 정상 작동 되도록 변경되었습니다!!

 

코드의 차이를 분석해 본 결과

좌: Before, 우: After

 

둘 다 동일하게 자식요소에 스타일을 적용하는 코드이지만 브라우저 호환성에 따라 CSS를 어떻게 읽느냐에 차이로 인해 문제가 발생한 것 같습니다.

 

잘 해결할 수 있게 도와주신 이헌섭 책임님께 정말 감사합니다.