#svg #text #safari
#svg #текст #safari
Вопрос:
Я вижу странную проблему в 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, похоже, в порядке. Если кто-нибудь видел эту проблему раньше, пожалуйста, дайте мне знать. Спасибо!
Комментарии:
1. Я создал изолированный тест здесь: jsfiddle.net/gr1redv6/1 . Нажатие на любой из редактируемых разделов приводит к их исчезновению, пока вы не используете полосу прокрутки. Я предполагаю, что это сбрасывает фокус.
Ответ №1:
После нескольких тестов я выяснил, что в этом конкретном примере проблема вызвана ситуацией, когда редактируемый текст имеет более высокий z-индекс, чем изображение (растровое или svg). Изображение может быть размещено где угодно, но не геометрически ниже текста. Эта проблема также характерна для Safari 10 . Тестирование исходного примера в 9.1, все работает.
Я создал простой пример тестирования z-index https://jsfiddle.net/xngmocxm/9 Существует элемент фона, который является jpeg, он имеет z-index = 0, 2 элемента пути svg (серый и красный), 2 редактируемых текстовых элемента и svg-изображение (домашняя страница в верхнем левом углу). Z-индекс левого текстового элемента установлен на 30, у правого z-индекс 20, z-индекс изображения svg установлен на 25, то есть между 2 текстовыми элементами. В тестовом браузере я вижу, что в этом случае исчезает только левый текст, правый отображается и выделен просто отлично. Таким образом, SVG, который находится над текстом, не указывает на проблему, но если SVG находится под редактируемым текстом, эта проблема возникает. Если содержимое изображения в формате JPEG, это также вызывает ту же проблему: img src https://jsfiddle.net/xngmocxm/12 /
В любом случае я смог исправить это, установив значение переполнения в скрытое на оболочке изображения проблемного элемента изображения. Я думаю, что это ошибка Safari, а не преднамеренное поведение.