JSFiddle - React, Tailwind, and code Playground

HTML

<div id="subpixel-antialiased">subpixel-antialiased
    <br/>0.02112991333008786432</div>
<div id="antialiased">antialiased
    <br/>0.02112991333008786432</div>
<div id="unspecified">unspecified
    <br/>0.02112991333008786432</div>
<div id="fixed">I am a fixed element.<br/>Drag me out of this frame so that I cannot be seen.<br/>When I am not visible, font smoothing changes.</div>
<button id="toggle-fixed">Toggle position:fixed element</button>
<button id="toggle-smoothing">Toggle -webkit-font-smoothing</button>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:100);
 body {
    font-family:'Roboto', sans-serif;
    font-size: 18px;
    line-height: 24px;
    background-color: #eee;
}
#subpixel-antialiased {
    -webkit-font-smoothing: subpixel-antialiased;
    margin-bottom: 10px;
}
#antialiased {
    -webkit-font-smoothing: antialiased;
    margin-bottom: 10px;
}
#fixed {
    position: fixed;
    top: 250px;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 1;
    background-color: rgba(0,0,0,0.2);
    cursor: move;
}

JavaScript

$("#fixed").draggable({
    revert: true,
    revertDuration: 100
}).disableSelection();
$("#toggle-fixed").click(function () {
    $("#fixed").toggle();
});
$("#toggle-smoothing").click(function () {
    if ($("#unspecified").css("webkitFontSmoothing") === "auto") {
        $("#unspecified").css("webkitFontSmoothing", "subpixel-antialiased");
    } else {
        $("#unspecified").css("webkitFontSmoothing", "");
    }
});