문제

편집기는 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/)에서 데모를로드하기 만하면됩니다.