Safari (OS X) не генерирует события указателя при переполнении содержимого SVG

Мне нужно зафиксировать события указателя click и mousemove на фигурах, которые находятся за пределами поля содержимого, определенного через ширину/высоту <SVG>, отображаемого через overflow: visible.

В этом примере circle отображается правильно, а текущие Chrome, FireFox и IE11 захватывают события указателя в переполняющей части, независимо от того, есть ли, например. padding. Однако в Safari 10.0.1 OS X события указателя не регистрируются, даже когда я использую padding, border и/или margin, независимо от того, какие из 8 возможных перестановок.

Safari выдает щелчок, только если он находится внутри блока содержимого <SVG>: https://jsfiddle.net/monfera/n1qgd5h4/ 5/

Есть ли способ прослушивания событий указателя, находящихся в области переполнения? Я еще не проверял, является ли Safari несовместимым (ошибка) или другими браузерами.

Я могу прибегнуть к обходному пути, создав элемент <SVG> большего размера, но это сведет на нет большую часть преимуществ блочной модели и CSS overflow, что приведет к ручному переделыванию в JS того, что должен делать браузер.


svg css safari overflow pointer-events
person Robert Monfera    schedule 14.11.2016    source источник
comment
Safari не соответствует требованиям.   -  person Robert Longson    schedule 16.11.2016
comment
Спасибо, @RobertLongson, я подал отчет об ошибке 29307386 в Apple.   -  person Robert Monfera    schedule 22.11.2016
comment
Вам может пригодиться следующий полифилл. github.com/jquery/pep   -  person Squiggs.    schedule 23.11.2016
comment
@RobertMonfera, не могли бы вы предоставить прямую ссылку на этот отчет об ошибке, который вы отправили? Эта проблема обсуждается здесь и может быть интересно посмотреть ответ webkit. (Я не смог найти это в багзилле webkit)   -  person Kaiido    schedule 06.02.2018
comment
@Kaiido Я не уверен, что эти вещи общедоступны; URL-адрес bugreport.apple.com/web/?problemID=29307386 после входа в систему , Вот основная часть, не намного больше информации: Шаги для воспроизведения: следуйте stackoverflow.com/questions/40587203/ и связанный jsfiddle: jsfiddle.net/monfera/n1qgd5h4/5 Ожидаемые результаты: ожидается, что Safari будет регистрировать события мыши при переполнении paint (или all); в этом примере отступы, границы или поля. Фактические результаты: Safari не регистрирует никаких событий указателя.   -  person Robert Monfera    schedule 06.02.2018
comment
@RobertMonfera... Действительно нет доступа. Так они ответили? Кто-нибудь работает над этим? Если нет, то лучшим местом будет bugs.webkit.org.   -  person Kaiido    schedule 06.02.2018
comment
@Kaiido пока нет ответа... Я проверю этот сайт, спасибо!   -  person Robert Monfera    schedule 07.02.2018

Ответы (1)


arrow_upward
0
arrow_downward

Это до сих пор не исправлено, прошло более 2 лет. Довольно разочаровывает.

Если вам нужно быстрое решение:

svg {
   width: 1000px;
   height: 1000px;
   pointer-events: none;
   // don't use overflow here

   path {
      pointer-events: auto;
   }
}

<path> затем захватит все события мыши. Немного хакерский, но работает во всех современных браузерах.

person Fabian von Ellerts    schedule 29.01.2019