safari engine problem with arabic lang when style of letter change

Question

I have this problem when I try to color one letter in the text the character returns to the default shape in the font like in the image.

note that I use a custom font that behaves normally in most other browsers(in devices other than ios), and the default color should be transparent

the HTML

<p class="idhar-rule">ٱ<span class="idhar">لۡ</span>كِتَٰبُ</p>

css

.idhar {
    color: #EB2A2D;
}
.idhar-rule {
    color: transparent !important;
font-family: 'idharFont';
    font-weight: 600;
    font-size: 4.2vw;
}

other notes:

• color is transparent to layer p on top of each other so that different Arabic grammar rules have different color and font families.
• font-family changes because some colored letters need to be colored without the mark above or under it so a custom font is created and the mark removed from it.
• there is a separation between the letters that are not colored.
• can't use (‍) to join letters because it stops the font from using its feature to get the correct combination and shape of the combined litter. it just gets the default bind of the two letters next to each other.

can someone tell me why this problem happens and how to fix it? thanks.

Answer 1

Add zero-width joiner before and after the span.

<p class="idhar-rule">ٱ&zwj;<span class="idhar">&zwj;لۡ&zwj;</span>&zwj;كِتَٰبُ</p>