:: выбор пропускает некоторые строки

Question

У меня есть это JSFiddle, и если вы попытаетесь выбрать текст, то только часть его будет в правильном цвете, остальное будет обычным синим.

::selection {background-color: #FF6347; color: #fff;} 
::-moz-selection{background-color: #FF6347; color: #fff;} 

Любой способ исправить?

Протестировано на сафари 9.1.

---

Chrome:

Safari:

Answer 1

Дело есть :: выбор элемент имеет некоторые проблемы с поддержкой хром и сафари ,

https://developer.mozilla.org/en-US/docs/Web/CSS/%3a%3aselection

Чтобы сделать его немного лучше просмотра в хром/сафари вы должны обернуть свой код между пролетом или абзаца, как так ..

https://jsfiddle.net/akrm7uaL/8/

Как вы видите, текст обернут в div или span, поэтому при выборе текста красный цвет. к сожалению, браузер не будет поддерживать пробелы между текстом, когда вы поместите новый div в свой код. Чтобы решить эту проблему, вы должны поместить все текст в промежутке вместо DIV и поместите его между одним DIV, как это ..

<div><span class="circular"></span></div> <!-- instead of --> <div><div class="circular"></div></div> 

https://jsfiddle.net/akrm7uaL/11/

Когда я смотрю на свой код, я полагаю, вы используете id для javascript или php или что-то еще, так что это не полностью ваш случай, если вам нужно добавить идентификатор к вашему коду.