Did Chrome 40 break justify-content CSS overriding?

Question

I noticed with today's Chrome 40 update that justify-content does not seem to get properly overriden by subsequent style declarations.

See this fiddle for an example:

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

and

.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 (override works):

enter image description here

Chrome 40 (override seems to be broken):

enter image description here

Am I correct in my assumptions or do I horribly misunderstand CSS? Note that this doesn't have to do with prefixes: Chrome supports unprefixed justify-content, and if it didn't work, there wouldn't be any difference when commenting out rules in first selector.

Update: filed as https://code.google.com/p/chromium/issues/detail?id=451387

Filed as https://code.google.com/p/chromium/issues/detail?id=451387 — Dan Abramov, Jan 23 '15 at 11:47
Looks like its linked to this issue: https://code.google.com/p/chromium/issues/detail?id=449887 — rwacarter, Jan 23 '15 at 11:51
so? the solution? is a chrome bug (and we had to wait next update) or we had to modify our css? — radar155, Jan 25 '15 at 01:23
@Radar155 It is a bug. Might be fixed in Chrome 41: https://code.google.com/p/chromium/issues/detail?id=449887#c11 — Dan Abramov, Jan 25 '15 at 01:54

score 11 · Accepted Answer · edited Mar 07 '15 at 03:45

You are entirely correct in your understanding of the cascade. If you look in the Web Inspector, you'll see the justify-content: center declaration struck out, but only when you uncheck it (in a similar fashion as commenting it out) can you get Chrome to ignore it.

Perhaps they accidentally broke something in a change between Chrome 39 and 40, as they have a really irritating habit of doing, but I have no idea what.

From the issue that rwacarter linked to, apparently they did something funky with their cascade resolution code in order to accommodate certain changes to the Flexbox spec, which seems to be the cause for this. Again, I don't claim to understand their reasons for doing so, but they seem to have a habit of rewriting things here and there that result in regressions all over the place. Good thing Chrome is on an evergreen rapid release cycle, eh?

Thank you! I filed an issue with Chromium. Kinda weird that something so basic broke for a particular property, but then, I never wrote browsers.. — Dan Abramov, Jan 23 '15 at 11:50

score 3 · Answer 2 · answered Jan 28 '15 at 17:49

3

Definitely looks to be a bug, and a very serious/annoying one at that!

I've written a hack to help us get through it. You'll only want to run this for affected chrome versions and might want to further tailor and test it for your application:

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

answered Jan 28 '15 at 17:49

Mike T

1,286
11
13

which should be something like: if (navigator.userAgent.toLowerCase().indexOf('chrome/40') > -1) { ... } – Mike T Jan 28 '15 at 18:00
Excelente soluciont, this work for me but in angularjs version – xzegga Feb 18 '15 at 23:55
just a heads up, it looks like this is still an issue for chrome/41 (at least on mac?) -- can just change the version detection for 'chrome/4' for all versions 40-49 – Mike T Mar 04 '15 at 17:59

score 1 · Answer 3 · answered Feb 19 '15 at 00:04

This is an angularjs implementation for script posted by @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');
            }
        }

        }
    };
});

Did Chrome 40 break justify-content CSS overriding?

3 Answers3

Linked