Editor doesn't work in Safari when height or width is a percentage

Problem

The editor works fine in Chrome, but doesn’t render properly in Safari. Looking at the resulting markup, it doesn’t even render the same way.

Here’s what the HTML for the gutter looks like in 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>

Here’s the same HTML for the gutter in 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>

This makes it a lot harder to test out when using for accessibility on a Mac since VoiceOver only properly works with Safari, and VoiceOver is the main screen reader for a Mac.

Sample code to reproduce your issue

No special code sample necessary, just load the demo in both Chrome and Safari (http://securingsincity.github.io/react-ace/)

[kavink]

@backwardok What’s not working for me is the react component , “width” does not not take percentage , just takes eg “500px” . I have not figured how to scale and fit to container .

[confiant-mfb]

As of today, react-ace will still not render if any flavor of ‘%’ is put into width or height, and will not scale to fit the parent properly. Edit: However, I was able to get it to work properly by setting the height and width to “auto”, and then making the parent force a flex.