Fixing CSS that breaks in Safari

I was put in charge of the publishing work (building the HTML and CSS markup) for a really important project.

I had finished the markup for all the pages, and deployment was the following Monday, when a problem came up.

CSS that worked fine in Chrome did not work properly in Safari, and I found myself in a very desperate situation.

With no time to spare, I first went through the code I had written earlier to solve the problem, and this is what I looked at:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28      .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;
          }
        }
      }

I figured the cause was the child selectors, and while I was fixing them one by one, a senior colleague who was also working late next to me sent me a link.

https://www.sassmeister.com/

SassMeister | The Sass Playground!

When I got this link, I remembered converting SCSS code to CSS syntax before, so I had no doubt that it wouldn't help in a situation like this one.

But the result was the exact opposite: the converted code worked properly in Safari too!!

Here is what I found when I compared the code

Both versions apply styles to child elements in the same way, but it seems the problem came from a difference in how each browser reads the CSS, depending on browser compatibility.

Many thanks to 이헌섭 책임님, the senior colleague who helped me solve it.