Safari Enlarged Text + Generated Content Width Bug

When text is enlarged in Safari, generated content can cause text to be pushed outside of its bounding box.

Example

Style Applied


#glossary {
  border: 1px solid #999;
  width: 200px;
}
#glossary dt,
#glossary dd {
  display: inline;
}
#glossary dt:after {
  content: '\00A0\2013\00A0';
}
#glossary dd:after {
  content: '\A';
  white-space: pre;
}

XHTML


<dl id="glossary">
  <dt>XHTML</dt>
  <dd>eXtensible HyperText Markup Language</dd>
  <dt>KB</dt>
  <dd>kilobytes</dd>
  <dt>PDF</dt>
  <dd>Portable Document Format</dd>
</dl>

Working Example (remember to enlarge your text)

XHTML: eXtensible HyperText Markup Language
KB: kilobytes
PDF: Portable Document Format

Screenshot (Safari 1.3 with text enlarged one step)

A screenshot of the error, taken in Safari 1.3 with text enlarged one step

Solution

None as of now…