clarify LS Score

[souders]

In reading the explainer I wondered about the units of LS Score. Is it just "fraction of viewport"? Might be nice to clarify that.

I would also have appreciated more examples. Two specifics:

1. In the example provided the border boxes overlap. What if they didn't? Suppose there was a div at the top that took 10% of the viewport, and it moved to the bottom of the viewport. Would that the LS Score be 0.2?
2. What if the element moves out of the viewport? This happens frequently in my experience, where a footer might appear in the viewport but then get pushed below the fold. If that footer took 10% of the viewport and then got pushed out, would the LS Score be 0.1?

[skobes-chromium]

These are good questions that the explainer could have been clearer on.

The "score" is deliberately unitless to give us flexibility to iterate on the algorithm. In principle it is only a number with some correspondence to the overall severity of the layout instability.

In the current algorithm its value is the impact fraction (fraction of viewport covered by impact region), but we are experimenting with a version of the LS score that multiplies this fraction by a different fraction based on the maximum distance that any element moved during the animation frame.

If a div whose size is 10% of the viewport moves such that its new visual rect has no overlap with its previous visual rect, and is at all times fully within the viewport, the LS Score will be 0.2. I intended to imply this by referring to a "geometric union", but I agree that an example would help.

The impact region is calculated only within the viewport. If a div occupying 10% of the viewport moves fully out of the viewport, then only the previous visual rect will contribute to the impact region, and the LS Score will be 0.1.