Unexpected behavior of flex-positioned elements when manipulating text appearance on hover

Question

I've been playing around with the flexbox properties to see what they can do:

display: flex;
flex-grow: n;
align-items: center;
justify-content: center;

However I've run into some unexpected behavior, and I'm hoping someone here can clarify for me. Manipulate one of the following properties of a flex-positioned element on the hover pseudo-selector:

text-size
font-weight
text-shadow

The elements' relative weights appear to be remeasured, so the elements' positions jump around. If you repeatedly hover back and forth between the top two or bottom two elements, you can reduce their weights to essentially zero. A jsfiddle to illustrate:

https://jsfiddle.net/b8bjv70f/8/

(And one with twice as many items: https://jsfiddle.net/b8bjv70f/9/)

And the corresponding code:

[HTML]

  <div class="container">
    <div class="item one">
      <a href="#">Item 1</a>
    </div>
    <div class="item two">
      <a href="#">Item 2</a>
    </div>
    <div class="item three">
      <a href="#">Item 3</a>
    </div>
  </div>

[CSS]

div.container {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  /* */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
div.item {
  background-color: rgbA(0, 0, 0, 0.05); outline: 1px solid white;
  /* */
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}
div.item a {
  padding: 1em 2em;
  font-family: 'sans-serif'; font-size: 1em;
  text-transform: uppercase; text-decoration: none;
  color: rgbA(150, 150, 150, 1.00); background-color: rgbA(255, 255, 255, 1.00); outline: 1px solid white;
}
div.one a:hover { text-shadow: 0 0 1em black; }
div.two a:hover { font-weight: bold; }
div.three a:hover { font-size: 1.5em; }

This is a very well formed question. Congrats on that but what is the problem actually? o.O — Batu.Khan
Thanks, I certainly understand the difficulties of responding to a poorly-articulated problem. In this case, you probably weren't able to reproduce the issue regardless. I've answered with clarification and a screen recording. — dev.pat

dev.pat dev.pat · Accepted Answer · 2016-01-05T02:59:09

I didn't have the chance to test multiple environments before posting this question, but it turns out I can only to reproduce the odd behavior on Chrome OS, specifically build 48.0.2564.48 beta 64-bit. Standard Chrome 47 on Windows has no issues.

View the following recording to see what I'm seeing:

https://drive.google.com/file/d/0B6dJsjhml2eYb0thREc5S2J3Tnc/view

At this point I believe the issue is specific to Chrome OS or the Chrome beta channel. If I have the time, which is unlikely, I will investigate until I feel confident in submitting a Chromium issue to Google Code... otherwise, hopefully someone else will see this and pick up where I've left off.

I'll mark this as the accepted answer tomorrow, barring anyone else contributing a more comprehensive resolution in the meantime.

Unexpected behavior of flex-positioned elements when manipulating text appearance on hover

1 Answers