Сглаживание объектов анимации при масштабировании

Было дело давно, было дело вечром, случайно наткнулся на трансляцию одного подкаста. Решил взглянуть в чатик. Один из слушателей просил помочь ему решить задачку со сглаживанием. Дан код на codepen.io, где в центре находится круг радиусом 10px. При клике на него, он раздувается в 100 раз, заполняя всю область экрана. Для того, чтобы вернуть его в исходное состояние, нужно снова кликнуть по нему(если кажется, что ничего не происходит, то подождите секунду и нажмите еще раз).


https://codepen.io/i0z/pen/eJeexL

Точка, при нажатии на которую происходит анимированное увеличение в 100 раз, а при повторном клике — возврат к первоначальному состоянию, имеет нечеткие контуры.

Проблема в том, что если значения выставлены в scale до 50, то всё работает более и менее хорошо (тестируем в Chrome). Но если стоит значение выше, как в нашем случае, например, 100, то при трансформации мы видим страшную не сглаженную картинку.

Сглаживание не срабатывает при scale(100)

Интересно стало решить задачу именно в таком ключе чисто из спортивного интереса. Начал пробовать совершенно разные фильтры, комбинации CSS свойств и прочие манипуляции…

В итоге придумал решение. Не сказать что оно идеальное. Но в данном конкретном случае оно решает проблемы со сглаживанием.

Если вспомнить, что я сказал выше, то опытным путем было выявлено что происходит сглаживание при значениях scale до 50. Т.е. нам надо уложиться в этот диапазон. Но физически нам нужен другой реальный размер объекта. Как быть?

Есть такое свойство как zoom, которое умеет менять видимый размер объекта. В итоге получается, что мы можем увеличить наш оригинальный объект в 10 раз через zoom, но показывать его в 10 раз меньше через scale(0.1).

https://codepen.io/i0z/pen/dGZZxP


Такие вот дела. А как вы решаете данную проблему? Или может быть это не проблема и я что-то не знаю?