React-ace: Редактор не работает в Safari, если высота или ширина указаны в процентах

Созданный на 12 июл. 2017 · 13Комментарии · Источник: securingsincity/react-ace

Проблема

Редактор отлично работает в Chrome, но некорректно отображается в Safari. Глядя на получившуюся разметку, она даже не отображается таким же образом.

Вот как выглядит HTML-код желоба в Safari:

<div class="ace_gutter">
  <div class="ace_layer ace_gutter-layer ace_folding-enabled" style="margin-top: -5px; height: 52px; width: 42px;">
    <div class="ace_gutter-cell " style="height: 19px;">3</div>
  </div>
  <div class="ace_gutter-active-line" style="top: -5px; height: 19px;"></div>
</div>

Вот тот же HTML-код для желоба в Chrome:

<div class="ace_gutter">
  <div class="ace_layer ace_gutter-layer ace_folding-enabled" style="margin-top: 0px; height: 585px; width: 42px;">
    <div class="ace_gutter-cell " style="height: 19px;">1<span class="ace_fold-widget ace_start ace_open" style="height: 19px;"></span></div>
    <div class="ace_gutter-cell " style="height: 19px;">2</div>
    <div class="ace_gutter-cell " style="height: 19px;">3</div>
  </div>
  <div class="ace_gutter-active-line" style="top: 38px; height: 19px;"></div>
</div>

Это значительно усложняет тестирование при использовании специальных возможностей на Mac, поскольку VoiceOver правильно работает только с Safari, а VoiceOver - это основное средство чтения с экрана для Mac.

Пример кода для воспроизведения вашей проблемы

Нет необходимости в специальном образце кода, просто загрузите демо в Chrome и Safari (http://securingsincity.github.io/react-ace/)

bug help wanted issue with ace

Источник

backwardok

Все 13 Комментарий

@backwardok Я могу воспроизвести, но я не уверен, в чем причина. Это может быть проблема самой библиотеки Ace. Я буду исследовать дальше.

securingsincity 18 июл. 2017

Интересно, что @backwardok разделенный редактор работает http://securingsincity.github.io/react-ace/split.html, поэтому мне интересно, не связана ли это с одной из конфигураций демонстрации.

securingsincity 18 июл. 2017

Итак, после некоторой отладки пример редактора отлично работает без height="100%" что, мягко говоря, интересно ... Сейчас я собираюсь удалить это из примера. Не уверен, в чем проблема на самом деле, может быть, связано с Ace

securingsincity 19 июл. 2017

Странно! Надеюсь, эта работа решит проблему, которую мы наблюдаем при ее использовании. Спасибо, что изучили это!

backwardok 19 июл. 2017

@backwardok без проблем. Просто потому, что мне любопытно, в каком проекте вы используете react-ace?

securingsincity 19 июл. 2017

@securingsincity мы используем его для игровой площадки в сборнике рассказов, чтобы разработчики могли поиграть с различными компонентами реакции, которые существуют в нашей библиотеке.

backwardok 19 июл. 2017

Изменение заголовка, поскольку это проблема, уникальная для ace, и установка высоты и ширины в процентах.

securingsincity 3 авг. 2017

Вроде работает с ace в Safari и Chrome. Или я что-то не так делаю?
Доказывать

dmigo 6 авг. 2017

@dmigo Компонент React не используется? просто ace.js ?

kavink 20 дек. 2017

Не уверен, изменился ли пример с тех пор, как я его создал, но похоже, что пример работает в Safari?

backwardok 20 дек. 2017

@backwardok Что не работает для меня, так это компонент реакции, «ширина» не принимает процентное значение, просто принимает, например, «500 пикселей».
Я не понял, как масштабировать и помещать в контейнер.

kavink 20 дек. 2017

😕4

React-ace по-прежнему, похоже, не может брать процент для ширины или высоты.

connorwaslo 3 июн. 2018

На сегодняшний день react-ace по-прежнему не будет отображаться, если какой-либо оттенок '%' будет помещен в ширину или высоту, и не будет масштабироваться, чтобы правильно соответствовать родителю.
Изменить: Однако мне удалось заставить его работать должным образом, установив высоту и ширину на «авто», а затем заставив родительскую силу сгибаться.