問題

エディターはChromeでは正常に機能しますが、Safariでは正しくレンダリングされません。 結果のマークアップを見ると、同じようにレンダリングされることすらありません。

SafariでのガターのHTMLは次のようになります。

<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>

Chromeのガターと同じHTMLは次のとおりです。

<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>

これにより、VoiceOverはSafariでのみ適切に機能し、VoiceOverはMacのメインスクリーンリーダーであるため、Macでアクセシビリティを使用する場合のテストが非常に困難になります。

問題を再現するためのサンプルコード

特別なコードサンプルは必要ありません。ChromeとSafariの両方にデモをロードするだけです（http://securingsincity.github.io/react-ace/）