I have an absolutely positioned element that I am moving into the viewport. An element has text inside it. My understanding is this:
It’s bad practice to apply transitions to an element’s position (i.e., top, left, bottom, right, margins, indents). This causes the browser to overflow when the item moves around the page.
It’s good practice to apply transformations to an element since the browser is not re-streamed because the model model’s location is in its original position.
Applying a transform to an element in a Webkit browser forces hardware acceleration. (Or it can be forced to do this, i.e. If transform: translateX does not, then you can use translate3d with the z axis, which is 0).
Text that is hardware accelerated is not considered a vector. This results in blurry text.
I found this article discussing workarounds, but I'm not satisfied.
It would seem better to translate the element using transformations, but as soon as the element reaches its resting state, replace the left / top transformation of the same measure to remove the element from hardware acceleration.
Am I on the right track? Is there an easier solution here?
As a simple example, read the text when switching the will-change property. You can see that the text is blurred in anticipation of the conversion, even if the conversion does not occur. This is the same as leaving the element transform even after it has finished moving / having text next to the moving element. It would be nice to tell Chrome to save the text as a vector, but I suspect that all parent elements get promoted, so the text changes.
$('button').click(function() { $('.example').toggleClass('is-blurred'); });
.example { font-size: 24px; } .example.is-blurred { will-change: transform; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Toggle blur</button> <div class='example'> I am some text </div>
source share