Typing над пролетом добавляет фантом цвет фона стиль

JSFiddle: http://jsfiddle.net/p7ph5vfj/Typing над пролетом добавляет фантом цвет фона стиль

Мой вопрос: Может ли кто-нибудь предложить обходной путь к этой хромированной определенной ошибки? Моя проблема заключается не в том, что буква X подсвечена, а в том, что она теряет класс .foo и поэтому больше не могу ее найти. Мне было бы хорошо, если бы класс .foo оставался включенным или если цвет фона уходит. Я даже не знаю, как отлаживать это, поскольку точки останова DOM не срабатывают, когда это происходит.

<div contenteditable="true"> 
    DO NOT REPLACE. <span class="foo">END a b c</span> d START la la 
</div>

и CSS выглядит следующим образом:

.foo { 
    background-color: #ff0000; 
}

шаги, чтобы вызвать ошибку на хром являются:

Возьмите мышь, поместите курсор рядом со словом START
Нажмите и удерживайте, чтобы выбрать текст, перейдите к LEFT и завершите выделение словом КОНЕЦ.
Отбор должен включать в себя следующий текст: «КОНЕЦ a b c d START». Опять же, выбор должен быть справа налево.
Введите новый символ на клавиатуре, как «X»
Если X выделяется красным цветом, вы вызвали ошибку.

Исправлена ошибка, в частности, является то, что HTML теперь выглядит следующим образом:

<div contenteditable="true"> 
    DO NOT REPLACE. <span style="background-color: rgb(255, 0, 0);">X</span>&nbsp;la la 
</div>

Где класс .foo идти и где этот цвет фона стиль пришел? Добавление точек останова DOM в div или span не срабатывает, когда это происходит.

источник

2015-06-09 AnilRedshift

Очень хорошо сделано вопрос. Мне любопытно узнать, что там происходит. – connexo

Интересно, он получает цвет фона из класса и помещает его в стиле. Что еще более интересно, так это то, что если класс имеет свойство color, span лишается своего класса и заверяется в тег '' с атрибутом цвета !!! [Вот пример этого] (http://jsfiddle.net/yhgp3xcv/) – misterManSam

Да, и если у вас есть '.foo {display: block}', он добавляет лишний '
' в промежутке. Если у вас есть '.foo {display: inline-block}' span, то исчезает полностью. Прекрасный материал.Нет решения, хотя; Я тестировал с 'id' и' role', но эти атрибуты также исчезают. –

Я знаю, что это не совсем чистый код, но если вы обернете свой span.foo другим интервалом, проблема будет исправлена.

<div contenteditable="true"> DO NOT REPLACE. <span><span class="foo">END a b c</span></span> d START la la </div>

источник

2015-06-10 14:36:47

Решение, которое я в конечном итоге приземлился на том, чтобы добавить обработчик KeyDown, обнаружить этот конкретный случай, а затем NERF имя класса путем добавления подчеркивания к нему. В keyup я восстанавливаю класс.

Это некрасиво и вызывает визуальное мерцание, но это уменьшает тяжесть ошибки. Надеюсь, это поможет кому-то другому. Тем не менее в ожидании WebKit ошибки быть исправлены :-)

(Это то, что предложенная выше Сабольч Pall, но как комментарий, так что я не могу пометить его как ответ)

источник

2015-09-16 00:01:12 AnilRedshift

Typing над пролетом добавляет фантом цвет фона стиль

ответ

Смежные вопросы