Содержимое Canvas выходит за пределы холста на мобильных устройствах в Firefox ⇐ Android

[Anonymous]

Я масштабирую (и переводю) холст HTML с помощью атрибута преобразования CSS. В большинстве сред это работает так, как и ожидалось, однако в Firefox на мобильном устройстве (Android 14) контент не помещается на холсте в правом нижнем углу. Под содержанием я подразумеваю что-то, нарисованное на холсте, например. либо ctx.fillRect(...), либо ctx.putImageData(...). Это несоответствие можно увидеть, задав холсту цвет фона (в примере розовый) и нарисовав его с помощью ctx.fillRect(...) или ctx.putImageData(...) (серый в примере). Этот Codepen напрямую демонстрирует проблему (шахматная доска выделяет отдельные пиксели холста). Код ниже также демонстрирует проблему, но не выделяет пиксели холста (он все равно показывает несоответствие), чтобы быть более кратким.
Обратите внимание, что содержимое холста всегда идеально вписывается в холст. верхний левый угол. Под этим я подразумеваю, что в верхнем левом углу холста, т.е. в точке (0,0) в координатах холста, нет видимого несоответствия/смещения. Это говорит о том, что контент правильно выровнен по верхнему левому углу, и его размеры (ширина, высота) не соответствуют размерам холста.
Я кратко протестировал это в Firefox, Edge, Chrome и Opera на обоих устройствах. настольных и мобильных устройствах, и проблема возникает только в Firefox на мобильных устройствах.
Несоответствие в Firefox на мобильных устройствах
Несоответствие в Firefox на мобильном устройстве с выделенным элементом холста
Ожидается
Ожидается с выделенным элементом холста
index.html :

Код: Выделить всё

main.js:

Код: Выделить всё

const canvas = document.getElementById('canv')
const ctx = canvas.getContext('2d')
ctx.fillStyle = `rgba(100, 100, 100, 0.5)`
ctx.fillRect(0, 0, canvas.width, canvas.height)

style.css:

Код: Выделить всё

body {
margin: 0;
}

#canv {
background-color: palevioletred;
transform: translate(-14800px, -7000px) scale(100);
}

Помимо прочего, я подозревал, что это как-то связано с дробным масштабированием или переводом, но в этом минимальном примере не используются дроби, а все целые значения. Codepen показывает, что дело не в том, что отрисовывается слишком много или слишком мало отдельных пикселей холста, поскольку несоответствие меньше, чем размеры пикселя холста. Если это может быть актуально, устройство, которое я использовал, имеет параметр devicePixelRatio, равный 2,608695652173913.
На этом этапе я уже некоторое время ломаю голову по этому поводу и не знаю, что еще посмотреть. в. Любая помощь будет принята с благодарностью.

Подробнее здесь: https://stackoverflow.com/questions/790 ... in-firefox