I am trying to create an image editor using the ‘transform: matrix’ and ‘filter’ CSS properties. The ‘transform: matrix’ works fine if the ‘filter’ CSS property is not used, but as soon as I apply the ‘filter’ property the image begins to blur. I need to be able to set the image height.

Below is some html code to see how the same image blurs with different CSS configurations (images one and three are blurred, the second has proper sharpness). In some cases it is very subtle but there is definitely a change in image sharpness. It just seems the ‘transform: matrix’ and ‘filter’ properties do not play well together in this case.

<div>
    <img height="300" src="https://lh4.googleusercontent.com/-_ny-la5QPxU/UrJIT6wsSbI/AAAAAAAAuMQ/YD1FR1SfVWw/w571-h857-no/IMG_1646.JPG" style="filter:brightness(100%);transform: matrix(2, 0, 0, 2, 26.25, 0);"/>
</div>
    <div>
<img height="300" src="https://lh4.googleusercontent.com/-_ny-la5QPxU/UrJIT6wsSbI/AAAAAAAAuMQ/YD1FR1SfVWw/w571-h857-no/IMG_1646.JPG" style="transform: matrix(2, 0, 0, 2, 26.25, 0);"/>
    </div>
<div>
    <img src="https://lh4.googleusercontent.com/-_ny-la5QPxU/UrJIT6wsSbI/AAAAAAAAuMQ/YD1FR1SfVWw/w571-h857-no/IMG_1646.JPG" style="filter:brightness(100%);transform: matrix(2, 0, 0, 2, 26.25, 45.3125);height:300px;"/>
</div>

This see how this code behaves in Firefox, copy the code above and paste into the body of this online editor at W3Schools.

A bug report was submitted to Mozilla.