Electron BrowserWindow で transform: scale が動作しない [Chrome WebView Bug]

𝕤𝕚𝕞𝕠𝕔𝕙𝕖𝕖 2022/01/19

electron browserwindow tranform scale でググる

𝕤𝕚𝕞𝕠𝕔𝕙𝕖𝕖 2022/01/19

それっぽい Issue (7777!!)

𝕤𝕚𝕞𝕠𝕔𝕙𝕖𝕖 2022/01/19

Chrome のWebビューに存在する既知のバグっぽい？

𝕤𝕚𝕞𝕠𝕔𝕙𝕖𝕖 2022/01/19

治ってなさそう

𝕤𝕚𝕞𝕠𝕔𝕙𝕖𝕖 2022/01/19

エラーを治すための方法が載ったリポジトリ

𝕤𝕚𝕞𝕠𝕔𝕙𝕖𝕖 2022/01/19

width / height に px を指定すると、そちらが優先されて scale が実質動作していないみたいになるっぽい？

𝕤𝕚𝕞𝕠𝕔𝕙𝕖𝕖 2022/01/19

いや、 width/height に ${1 / scale * 100}% を指定するのも必要そう

𝕤𝕚𝕞𝕠𝕔𝕙𝕖𝕖 2022/01/19に更新

リポジトリに記載のとおり、 width/height を ${1 / scale * 100}% に置き換えればバグを回避して想定の動作にすることができた。

※基準となる大きさ自体は scale させる子要素に持たせる必要がある

const size = 200;
const scale = 0.5;

const buggyStyle = useMemo(() => {
  return {
    width: `${size}px`,
    height: `${size}px`,
    transform: `scale(${scale})`,
  }
}, [/* deps */]);

const fixedStyle = useMemo(() => {
  return {
    width: `${1 / scale * 100}%`,
    height: `${1 / scale * 100}%`,
    transform: `scale(${scale})`,
  }
}, [/* deps */]);