AnkiMobile CSS color not working as expected

Anki Card Design
16

It looks like that this is an IOS bug since AnkiWeb has the same problem

After further investigation, i found that any text specified as white(#ffffff) and preceded by an emoji —even if the emoji and the text are not on the same level— ends up being rendered in a strange color.

Finally the very weird solution, if I set the .tag color to something close to white and assign a different color to .tag::before (i don’t know why, but this step is necessary—otherwise, the text color still ends up being affected by the emoji), then the text renders in the color I specified.

example
example1179×598 59.8 KB

.tag {
    border-radius: calc(var(--ui-normal-radius)*1.5);
    background-color: #3c7eda;
    color: #fffffe;   /* specify a color close to white*/
    font-size: calc(var(--default-font-size)*0.8);
    padding: 2px 4px 2px 4px;
    min-width: 1.2rem;
}


.tag::before {
    content: var(--tag-content);
    font-family:emoji;
    background-image: linear-gradient(#fff, #fff);
    background-size: 1px 80%;
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 4px;
    margin-right: 4px;
    color:yellow; /* any color except #fffffe */
}