Streaming live at 10am (PST)

CSS Help, Safari not showing CSS Counters

Need some help from CSS gurus, I wrote some custom code to perform CSS counters styling, they appear fine on all browsers except Safari. I tried googling for solutions but couldn’t find anything that explains why.

Here’s the live client site: https://www.rimbunkl.com/unit-types/type-a1

If you load the site on chrome, no issues. The ordered list number displays. But not on Safari mobile.

Here’s the CSS I wrote:

.x-ut-richtext > ol li { position: relative; counter-increment: compound-counter; }
.x-ut-richtext > ol li::before { 
    content: counter(compound-counter); background: #004d40; color: #fff;
    position: absolute; left: -32px; top: 0; border-radius: 50%;
    display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
    width: 24px; height: 24px;
    -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
    -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
.x-ut-richtext.for-features > ol li::before { background: #7A5F3D; }