Высота блока кода-зеркала не одинакова в Chrome и Safari

Я хочу создать макет, который удовлетворяет следующим условиям:

1) у него есть блок сверху, чей height соответствует его содержимому

2) ниже он имеет code-mirror и блок бок о бок, которые заполняют ровно остальную часть страницы в терминах height.

Я сделал здесь plunker. Проблема в том, что он хорошо работает в Chrome 57.0.2987.133, тогда как он не работает хорошо в Safari 10.1: height для code-mirror НЕ достаточен; он показывает только строки 76 кода, а не правильные строки 80.

Кто-нибудь знает, как это исправить?

<style>
    .rb {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .rb .container {
        flex: 1;
        display: flex;
        width: 100%;
        height: 100% /* new */
    }
    .rb .first-row {
        border: 1px solid black;
        /*flex: 0 0 60px;*/
    }
    .rb .CodeMirror {
        flex: 1;
        height: auto;
    }
    .rb .flex-preview {
        flex: 1;
        border: 1px solid black;
    }
</style>

<div class="rb">
    <div class="first-row">
        1<br/>2<br/>3<br/>4<br/>
    </div>
    <div class="container">
        <textarea ng-model="body" ui-codemirror="option"></textarea>
        <div class="flex-preview">
        </div>
    </div>
</div>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <ui-view></ui-view>
  </div>
  <script>
    var app = angular.module("myApp", ['ui.router', 'ui.codemirror']);
    app.config(['$stateProvider', function ($stateProvider) {
        $stateProvider
            .state('global', {
              templateUrl: 'template.html'
            })
    }]);
    app.controller('myCtrl', ['$scope', '$state', function ($scope, $state) {
      $scope.option = { mode: 'text/html', lineNumbers: true, matchBrackets: true };
      $scope.body = ""
      for (var i = 1; i <= 79; i++) 
          $scope.body = $scope.body + "a\n";
      $state.go('global')
    }])

  </script>
</body>

Ответы

Ответ 1

Согласно http://www.caniuse.com, существует несколько известных проблем с Safari re vh:

Safari & iOS Safari (both 6 and 7) does not support viewport units 
for border widths, column gaps, transform values, box shadows or in calc().

iOS 7 Safari sets viewport unit values to 0 if the page has been left 
and is returned to after 60 seconds.

iOS 7 Safari recalculates widths set in vh as vw, and heights set in vw
as vh, when orientation changes.

vh on iOS is reported to include the height of the bottom toolbar in the
height calculation, and the width of the sidebar (bookmarks) in the vw 
width calculation.

Как вы установили ширину границы в отправленном коде, использование вертикальной высоты (vh) в качестве единицы измерения будет представлять собой проблему для вас.

Есть несколько обходных решений, я полагаю, вы могли бы использовать процент, настроить сафари vh, используя обнаружение браузера (модернизатор?), или вы могли бы добавить маржу или дополнение? Только некоторые мысли с головы. Удачи.

Надеюсь, что это поможет

EDIT: Ваша проблема может заключаться в использовании flex, который, к сожалению, имеет проблемы в Safari, который отмечен как фиксированный, поскольку он раньше появлялся в Chrome также, но был исправлен в Chrome 51. Он по-прежнему встречается в Safari в соответствии с caniuse

In Safari, the height of (non flex) children are not recognized in percentages. 
However other browsers recognize and scale the children based on percentage heights. (See bug) 
The bug also appeared in Chrome but was fixed in Chrome 51

Указание того, что дети без флешки НЕ измерены в%, предполагает, что вместо этого можно использовать vh (что приводит к моему более раннему ответу).

С другой стороны, это не только вы, испытывающие эту проблему! Это известная ошибка, которая должна быть исправлена в будущей версии. Каждое облако имеет серебряную подкладку..:)

ИЗМЕНИТЬ № 2

Еще одна проблема с Safari (iOS) заключается в том, что она не поддерживает минимальную ширину (фактически только на элементах таблицы во втором взгляде) в CSS. Ваша внешняя ссылка в таблицах стилей может использовать минимальную ширину, чтобы это также могло влиять на результат. Он записывается как происходящий в iOS 5.1, но неясно, было ли оно исправлено в более поздних версиях.

Ответ 2

Вы устанавливаете высоту контейнера code-mirror (.rb) с помощью height: 100%. Но вы не указали высоту, указанную в родительском контейнере.

Когда вы используете процентные высоты, некоторым браузерам по-прежнему требуется определить высоту родителя (используя свойство height). Это была традиционная реализация spec language, хотя не все браузеры больше придерживаются этой интерпретации.

Однако, если вы собираетесь использовать height: 100% для элемента, и вы хотите обеспечить поддержку кросс-браузера, убедитесь, что родительский контейнер имеет определенную высоту. Если родитель также использует процентную высоту, то его родитель должен также иметь определенную высоту.

В качестве альтернативы просто используйте height: 100vh on .rb и сделайте с ним.

Тогда ваш flex: 1 on .container будет работать, чтобы потреблять доступную высоту.

Более подробную информацию и другие решения можно найти здесь:

Ответ 3

.rb .container {
  flex: 1;
  display: flex;
  width: 100%;
  height: auto /* new */
}

Попробуйте использовать высоту как "авто".