I observed a weird effect today while working on something. I was using CSS height transition to change my website's header height and observed the whole website's text was shaking.
Eventually I was able to pinpoint the cause of it and it was fractional value of computed line height. Following is the effect:
.hover {
height: 20px;
overflow: hidden;
transition: height 1s ease;
}
.hover:hover {
height: 100px;
}
p {
font-size: 15px;
line-height: 1.3;
/*Computed line height is 19.5 -- fraction*/
}<div class="hover">
Hover over me<br>
foo bar<br>
foo bar<br>
foo bar<br>
</div>
<p class="shake">
I will shakeI will shakeI will shake <br>
I will shake I will shakeI will shake<br>
I will shake I will shakeI will shake<br>
I will shake I will shakeI will shake<br>
I will shake I will shakeI will shake<br>
</p>Compare this to non-fractional computed line-height text:
.hover {
height: 20px;
overflow: hidden;
transition: height 1s ease;
}
.hover:hover {
height: 100px;
}
p {
font-size: 15px;
line-height: 1.2;
/*Computed line height is 18 -- non-fraction*/
}<div class="hover">
Hover over me<br>
foo bar<br>
foo bar<br>
foo bar<br>
</div>
<p class="shake">
I will shakeI will shakeI will shake <br>
I will shake I will shakeI will shake<br>
I will shake I will shakeI will shake<br>
I will shake I will shakeI will shake<br>
I will shake I will shakeI will shake<br>
</p>So, why does it happen? What are possible ways to fix the shaking while keeping the fractional computed line-height?