Open
Description
It is not clear how text-size-adjust and em units should interact (spec). Not adjusting em units leads to clipped text. Adjusting em units leads to double-adjustment of line-height.
Example (live):
<!doctype html>
<meta name="viewport" content="width=device-width">
<style>
html { -webkit-text-size-adjust: 250%; text-size-adjust: 250%; }
</style>
<p>
height (em, px):
<div style="height: 1em; width: 16px; background: lightblue; display: inline-block;">a</div>
<div style="height: 16px; width: 16px; background: lightgreen; display: inline-block;">a</div>
</p>
<p>
border-width (em, px):
<div style="border-top: 1em solid blue; width: 16px; background: lightblue; display: inline-block;">a</div>
<div style="border-top: 16px solid green; width: 16px; background: lightgreen; display: inline-block;">a</div>
</p>
<p>
line-height (em, px):
<div style="line-height: 1em; width: 16px; background: orange; display: inline-block;">a</div>
<div style="line-height: 16px; width: 16px; background: purple; display: inline-block;">a</div>
</p>
Comparison between Webkit (left) and Chromium (right):
