After recent testing of a website, I noticed that when I zoomed out to 33% or 25% in Chrome, some text in static height divs seemed to be "climbing" out of the div.
Upon researching, I found information about:
- text-size-adjust (currently an experimental technology)
- font-size-adjust (support was dropped in CSS 2, but will be reintroduced in Chrome 44, whereas the current version is 42).
What would be your recommendation in this situation? I understand that zooming out to 25-33% is not a common scenario, but it still presents a problem. For reference, please see my JSFiddle and code snippet below.
HTML
<div id="block">
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
<div>
CSS
#block {
width: 100%;
height: 200px;
background-color: red;
}