Содержимое Safari редактируемый текст div исчезает

Question

Я вижу странную проблему в Safari 10, которая может присутствовать в более ранних версиях. Когда содержимое SVG присутствует в документе вместе с содержимым редактируемого div, текст исчезает. Это происходит главным образом при выборе текста, но также при переключении свойства отображения содержимого svg. Вот несколько видео, показывающих поведение: http://www.screencast.com/t/CeyFqYyfeFZW http://www.screencast.com/t/eRAGsopA

Я не могу сделать заявку доступной публично. У нас довольно сложный слой композиции, который, вероятно, виноват. Я попробую отправить изолированный тест позже. Я наблюдал эту проблему только в Mac OS X Yosemite (10.10.05). Кажется, что у iOS все в порядке. Если кто-нибудь видел эту проблему, прежде чем, пожалуйста, дайте мне знать. Благодаря!

Answer 1

После нескольких тестов я выяснил, что в этом конкретном примере проблема возникает из-за ситуации, когда редактируемый текст имеет более высокий индекс z, чем изображение (растр или svg). Изображение может быть размещено в любом месте, но не геометрически ниже текста. Эта проблема также относится к Safari 10+. Тестирование исходного примера в 9.1 все работает.

Я создал простой пример тестирования z-indexhttps://jsfiddle.net/xngmocxm/9/ Там является фоновый элемент, который является JPEG, имеет Z-индекс = 0, 2 SVG элементов пути (серый и красный), 2 редактируемые текстовые элементы и SVG изображения (HomeSmart в левом верхнем углу). Z-индекс левого текстового элемента установлен в 30, правый имеет z-индекс 20, svg-образ z-index установлен равным 25, то есть между двумя текстовыми элементами. В тестовом браузере я вижу, что в этом случае исчезает только левый текст, правый отображается и выбирается просто отлично. Так что svg, который находится над текстом, не обнаруживает проблемы, но если SVG находится ниже редактируемого текста, эта проблема возникает. Если содержание изображения JPEG, оно также вызывает и тот же вопрос: img srchttps://jsfiddle.net/xngmocxm/12/

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