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

[backwardok]

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

[securingsincity]

@backwardok I'm able to reproduce but I'm not sure what the cause is. This might be an issue with the Ace Library itself. I'll investigate further.

[securingsincity]

Interestingly @backwardok the split editor works http://securingsincity.github.io/react-ace/split.html so I wonder if this is an issue with one of the configurations of the demo.

[securingsincity]

So after doing some debugging the editor example works fine without the height="100%" which is interesting to say the least... I'm going to remove that from the example for now. Not sure what the issue really is here, might be Ace related

[backwardok]

Weird! Hopefully that work around solves the problem we're seeing in our usage of it as well. Thanks for looking into that!

[securingsincity]

@backwardok no problem. Just because I'm curious, what kind of project are you using react-ace in?

[backwardok]

@securingsincity we're using it for a playground within storybook to allow developers to play around with different react components that exist within our library.

[securingsincity]

Changing the title as this appears to be an issue unique to ace and setting the height and width to be a percentage.

[dmigo]

It seems to be working with ace in Safari and Chrome. Or am I doing something wrong?
Prove

[kavink]

@dmigo Its not using the React component ? just ace.js ?

[backwardok]

Not sure if the example changed since I created this, but it seems like the example is working in Safari?

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

[connorwaslo]

react-ace still seems to not be able to take a percentage for width or height.

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