JSFiddle - React, Tailwind, and code Playground

by Aubrey Taylor

HTML

<div class="out"></div>

CSS

body {
    font-family: courier;
    font-size: 12px;
    color: white;
    background: black;
}

JavaScript

var testWidth = 1.5;
var $el = $('<div style="width:1.5px;"></div>');
var $body = $('body');
var $message = $('<p></p>');
var $out = $('.out');

$out.append($message.clone().text('------- pre append widths --------'));
$out.append($message.clone().text('$el.width() => ' + $el.width()));
$out.append($message.clone().text('$el.css("width") => ' + $el.css('width')));
$out.append($message.clone().text('$el[0].getBoundingClientRect().width => ' + $el[0].getBoundingClientRect().width));
$out.append($message.clone().text(''));

$body.append($el);

$out.append($message.clone().text('-------- post append widths --------'));
$out.append($message.clone().text('$el.width() => ' + $el.width()));
$out.append($message.clone().text('$el.css("width") => ' + $el.css('width')));
$out.append($message.clone().text('$el[0].getBoundingClientRect().width => ' + $el[0].getBoundingClientRect().width));

var subpixel = function(testWidth, $el) {
    if(testWidth == $el[0].getBoundingClientRect().width) {
         return true;   
    }else {
        return false;
    }
}

$out.append($message.clone().text('------- supports subpixel --------'));
$out.append($message.clone().text(subpixel(testWidth, $el)));