What Is the Current State of Sub-Pixel Accuracy in the Major Browsers

Sub-Pixels calculated and rendered differently among browsers

As you already know, the problem arises from a different approach to subpixel calculus between browsers

In Chrome, for instance, borders can have a fractional size, but margins are handled different (as integers).

I don't have documentation about it from the Chrome team, but it's what can be seen in dev tools:

dev tools capture

AFAIK, there is not a way to change that.

Instead, you can transfer the use of the margin in the button to a border.

Since you need to get space for the 1px border of the input, do the same in the button, set a 1px border (instead of a margin), and set it transparent.

The remaining trick is to set the background-clip property to padding box, so that this transparency is not affected by the background

There is another bug in Chrome, the padding expressed in em is not reliable at this level of precision when the browser is zoomed. I changed this in the snippet.

Since we are using the border button to get the dimension ok, we can style the border using instead a inset shadow.

* {

  margin: 0; padding: 0; box-sizing: border-box;

}

button, input, wrapper {

  display: inline-block; border-radius: 3px;

}

.wrapper {

  position: relative;

  

  width: 60%;

  margin: 1em;

  background-color: #ccc;

}

input {

  border: 1px solid red;

  width: 100%;

  

  background-color: limegreen;

  line-height: 3em;

/*  padding: 0.75em; */

  padding: 10px;

}

button {

  position: absolute;

  right: 0;

  top: 0;

  bottom: 0;

  border: 1px solid transparent;

  width: 7em;

  margin: 0px;

  background-clip: padding-box;

  box-shadow:  inset 0px 0px 0px 2px  black;

}

<div class="wrapper">

  <input type="text">

  <button>Test</button>

</div>

Sub-pixel rendering in Chrome Canvas

Short answer: No. Not possible

This is one of two topics that frustrates a lot of Canvas users.

Subpixel rendering/anti-aliasing of any kind is up to the browser. This means that different browsers are prone to render things in different ways.

A lot of people have asked for anti-aliasing to be an option that can be turned on or off for a specific context. No luck of anything like that yet.

Chrome in particular you'll need to keep an eye on, because the way they have handled sub-pixel rendering has changed drastically over the past 4 months. If you start using the Chrome developer channel you'll get a preview of the things they keep trying out. They've been doing quite a bit of testing in this area, and have even pushed some drastic regressive changes that I've complained about.

The takeaway here is that:

Chrome is most definitely "not done yet" with regards to subpixel rendering. It sucks to say, but your best option for now is to wait a while.
The spec needs to be a lot more specific in this area so there is some consistency across browsers, because any subpixel rendering/anti-aliasing at all right now is very browser-dependent. There was unresolved discussion of it back in 2008. I'm not away of any progress since.

What is the reason for the discrepancy between the height and width values I set and the ones returned?

The reason about that discrepancy is that browsers differ on zooming functions. So as tyler durden said here:

"The reason why some browsers don't zoom properly has nothing to do with sub-pixel support, it is because they are not remembering the exact position and rounding correctly. In other words, they are prematurely rounding the position and that causes the image to be mis-aligned."

In fact, for the example you are referring too, on my browsers, safari as always zooms only text!

IE, Chrome, Opera and Firefox are resizing by calculating not only the text, but also, all the elements you are using on your page (border, width,padding etc). In addition, Border AFFECTS the outside edge of your element so lets see if its rounded properly:

<!DOCTYPE html>

<html>

    <head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

            <script>

        $(window).ready(function () {

            $("button").click(function () {

                var txt = "";

                txt += "Width of div1: " + $(window).width() + "</br>";

                txt += "Width of div1: " + $("#div1").width() + "</br>";

                txt += "Inner left border width of div1: " + $("#div1").css("border-left-width") + "</br>";

                txt += "Height of div1: " + $("#div1").height();

                $("#div1").html(txt);

                fixSubpixelLayout($('#all-cats'), $('#all-cats .cat'));

            });

        });

    </script>

        <style>

            #div1 {

                height: 100px;

                width: 300px;

                padding: 10px;

                margin: 3px;

                border: 1px solid blue;

                background-color: lightblue;

            }

        </style>

    </head>

    <body>

        <div id="div1"></div>

        <br>

        <button>Display dimensions of div</button>

        <p>width() - returns the width of an element.</p>

        <p>height() - returns the height of an element.</p>

    </body>

</html>

The state of browser 3D: rotating cube without Flash?

Check out this example. It's what you wanted - a rotating cube controlled by a mouse. It uses a framework called three.js, which will use WebGL if available, but can also fall back to 2D HTML5 canvas or SVG, as I understand it. The example I pointed to uses 2d canvas.

If you want hardware-accelerated 3D, then you want WebGL, which is currently supported in Chrome and the Firefox 4 Release Candidate. But for simpler 3D scenes the canvas and SVG support should be adequate. In the case of IE9, which doesn't support WebGL, canvas and SVG are hardware accelerated.

Update: These days WebGL is widely supported. Even long holdouts like IE and iOS Safari support WebGL in their current versions.

What Is the Current State of Sub-Pixel Accuracy in the Major Browsers

Sub-Pixels calculated and rendered differently among browsers

Sub-pixel rendering in Chrome Canvas

What is the reason for the discrepancy between the height and width values I set and the ones returned?

The state of browser 3D: rotating cube without Flash?

Related Topics

Leave a reply