Хром 40 нарушил выравнивание CSS-кода обоснования?

Я заметил сегодня обновление Chrome 40, что justify-content , похоже, не получает должным образом переопределения с помощью последующих деклараций стиля.

См. эту скрипту для примера:

  <div class="flex-parent">
    <div class="flex-child"></div>
    <div class="flex-child"></div>
  </div>

.flex-parent {
  display: flex;
  position: absolute;
  top: 0; right: 0; left: 0;

  /*
     IT SHOULD BE POSSIBLE TO SAFELY REMOVE
     THESE TWO LINES BECAUSE THEY ARE OVERRIDEN:
  */
  background: yellow;
  justify-content: center;
}

.flex-parent {
  /* Overriding background: it works! */
  background: green;

  /* Overriding justify-content: NOPE ;-( */
  justify-content: space-between;
}


.flex-child {
  width: 50px;
  height: 50px;
  margin: 10px;
  background: skyblue;
}

Firefox (переопределение работает):

Chrome 40 (переопределение кажется сломанным):

Правильно ли я в своих предположениях или я неправильно понимаю CSS? Обратите внимание, что это не связано с префиксами: Chrome поддерживает unprefixed justify-content, и если это не сработает, не будет никакой разницы при комментировании правил в первом селекторе.

Обновление: зарегистрировано как https://code.google.com/p/chromium/issues/detail?id=451387

Ответ 1

Вы полностью правы в своем понимании каскада. Если вы посмотрите в веб-инспекторе, вы увидите, что объявление justify-content: center вычеркнуто, но только если вы снимете его (аналогично комментированию), вы можете заставить Chrome игнорировать его.

Возможно, они случайно сломали что-то в переменах между Chrome 39 и 40, так как у них есть действительно раздражающая привычка, но я понятия не имею, что.

Из issue, с которым связан rwacarter, видимо, они сделали что-то напуганное с их каскадным кодом разрешения, чтобы внести определенные изменения в Flexbox spec, что, по-видимому, является причиной этого. Опять же, я не утверждаю, что понимаю их причины для этого, но у них, похоже, есть привычка переписывать вещи здесь и там, что приводит к регрессиям повсюду. Хорошо, что Chrome находится на вечнозеленом быстром выпуске, а?

Ответ 2

Определенно выглядит ошибкой и очень серьезным/раздражающим!

Я написал хак, чтобы помочь нам пройти через это. Вы только хотите запустить это для уязвимых версий chrome и, возможно, захотите дополнительно адаптировать и протестировать его для своего приложения:

$('body *').each(function(i, el){
    var justifyContents = $(el).css('justify-content').split(' ');
    var flexFlows = $(el).css('flex-flow').split(' ');
    if (flexFlows[0] == 'row' && justifyContents.length > 1) {
        if (justifyContents[0] == 'space-between' || justifyContents[0] == 'flex-start') {
            $(el).css('justify-content', justifyContents[0]+' left');
        } else if (justifyContents[0] == 'flex-end') {
            $(el).css('justify-content', justifyContents[0]+' right');
        }
    }
});

Ответ 3

Это реализация углов для script, отправленная @Mike T

angular.module('myApp').directive('flexChromeFix', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, fn) {

            var justifyContents = element.css('justify-content').split(' ');
            var flexFlows = element.css('flex-flow').split(' ');
            if (flexFlows[0] == 'row' && justifyContents.length > 1) {
            if (justifyContents[0] == 'space-between' || justifyContents[0] == 'flex-start') {
                element.css('justify-content', justifyContents[0] + ' left');
            } else if (justifyContents[0] == 'flex-end') {
                element.css('justify-content', justifyContents[0] + ' right');
            }
        }

        }
    };
});