texto - ¿Chrome 40 rompió la justificación de CSS del contenido justificado?

texto centrado y justificado css

Question

Noté que con la actualización de Chrome 40 de hoy, el justify-content justify no parece ser anulado adecuadamente por las declaraciones de estilo posteriores.

Vea este violín para un ejemplo:

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

y

.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 (anular trabajos):

Chrome 40 (la anulación parece estar rota):

¿Estoy en lo cierto en mis suposiciones o malentiendo horriblemente el CSS? Tenga en cuenta que esto no tiene que ver con los prefijos: Chrome admite el contenido justify-content prefijo, y si no funcionara, no habría ninguna diferencia al comentar las reglas en el primer selector.

Actualización: archivado como https://code.google.com/p/chromium/issues/detail?id=451387

Answer 1

Definitivamente parece ser un error, y uno muy serio / molesto.

He escrito un truco para ayudarnos a superarlo. Solo querrá ejecutar esto para las versiones de Chrome afectadas y es posible que desee personalizarlo y probarlo para su aplicación:

$(''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'');
        }
    }
});

Answer 2

Eres completamente correcto en tu comprensión de la cascada. Si te fijas en el inspector web, verás que está marcada la declaración justify-content: center , pero solo cuando la desactivas (de forma similar a como lo comentas) puedes hacer que Chrome lo ignore.

Quizás accidentalmente rompieron algo en un cambio entre Chrome 39 y 40, ya que tienen un hábito muy irritante de hacerlo, pero no tengo idea de qué.

A partir del code.google.com/p/chromium/issues/detail?id=449887 que se vinculó rwacarter, aparentemente hicieron algo extravagante con su código de resolución en cascada para adaptarse a ciertos cambios en la especificación de Flexbox, lo que parece ser la causa de esto. Nuevamente, no pretendo entender sus razones para hacerlo, pero parecen tener la costumbre de reescribir las cosas aquí y allá que resultan en regresiones por todas partes. Lo bueno es que Chrome está en un ciclo de lanzamiento rápido siempre verde, ¿eh?

Answer 3

Esta es una implementación angular para el script publicado por @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'');
            }
        }

        }
    };
});