React-ace: Editor doesn't work in Safari when height or width is a percentage

Created on 12 Jul 2017 · 13Comments · Source: securingsincity/react-ace

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

bug help wanted issue with ace

Source

backwardok

All 13 comments

@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 on 18 Jul 2017

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 on 18 Jul 2017

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

securingsincity on 19 Jul 2017

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

backwardok on 19 Jul 2017

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

securingsincity on 19 Jul 2017

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

backwardok on 19 Jul 2017

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

securingsincity on 3 Aug 2017

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

dmigo on 6 Aug 2017

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

kavink on 20 Dec 2017

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

backwardok on 20 Dec 2017

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

kavink on 20 Dec 2017

😕4

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

connorwaslo on 3 Jun 2018

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.