Why is Safari using and displaying the wrong CSS class in dev tools?

Viewed 85

I'm using plain old ng serve with Angular 10/Sass and getting this crazy behavior in Safari where it is using and displaying the wrong class. That is to say, a class that exists in my stylesheet but is not the class on the element.

In the image below, you can see that my div on the left has the fill class and that on the right, what is displayed is the fill-view-height class - an entirely different class in my stylesheet which is nowhere in the hierarchy of this element:

enter image description here

Now in this next image is what it looks like in Chrome (pictured) and Firefox (not pictured).

enter image description here

And finally, here is an image of what it looks like in Safari when I remove the fill class from the left using the inspector. You can see that now fill-view-height is gone from the right sidebar:

enter image description here

fill-view-height directly follows fill in my site-level stylesheet, but I rearranged the order and it didn't make a difference. I also renamed fill to be something completely different, but it didn't make a difference. It still worked in Chrome/Firefox and did not work in Safari. I also re-ran ng serve and tried a private window. I would love some insight into the madness that I'm witnessing or tips on how I might track down the problem.

0 Answers
Related