Built-in ul block with opacity stops cropping

Question

https://jsfiddle.net/23ng6rqg/2/

ul {
  list-style: none;
  display: inline-block;
}
ul > li {
  opacity: .5;
}
ul > li:hover {
  opacity: 1;
  cursor: pointer;
}

<ul>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
</ul>

Run code

In Chrome 43.0.2357.124, this CSS causes the tail in the last f “thing” to disconnect. I see that it has something to do with the width ul, since deleting inline-block(causing it to become full width) leads to the disappearance of the behavior.

I tested this in IE and Firefox; it does not occur in them.

Two questions:

• Why does setting ulon inline-blockmake the width too short for the tail "f"?

• Why opacitydoes disabling elements overlapping their parent element?

Answer 1

, li 1 :

ul > li {
    opacity: 1;
}  

'f' .

, inline-block webkit, , , .

, -webkit-text-stroke. , , text-stroke:

ul > li {
    opacity: .5;
    -webkit-text-stroke: 0.1px
}