jquery нестандартные символы неправильного цвета

Question

У меня странная проблема. У меня есть простой бит jquery, который меняет содержимое элемента div со знака плюс на тик, когда пользователь щелкает его.

$(document).on("click", ".myDiv", function() {
  $(this).html('✔');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myDiv" style="background-color:rgb(0,0,0); color:rgb(255,255,255)">+</div>

Цвет текста важен, так как он задается динамически, чтобы обеспечить его отображение на фоне, также динамически устанавливаемом. Все это хорошо работает на моем рабочем столе, но когда я смотрю на iPad, галочка всегда отображается черным, а на телефоне Android она отображается красным.

Может показаться, что это чем-то связано с нестандартным характером. Если я заменю галочку на *, например, все будет отлично.

Есть идеи, чтобы остановить это, пожалуйста?

Answer 1

В соответствии с рекомендацией этого превосходного ответа, который также описывает происходящее здесь , вы можете включить ︎ сразу после вашего символа ✔ для решения проблемы:

$(document).on("click", ".myDiv", function() {
  $(this).html('✔︎');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myDiv" style="background-color:rgb(0,0,0); color:rgb(255,255,255)">+</div>