y_saiki https://blog.hatena.ne.jp/y_saiki/ Sassyブログ https://www.sassy-blog.com/ IT・ソフトウェア 問題 これはコンテンツ部分の左右マージンにmargin: 0 auto;をしており、画面幅を変えてもコンテンツが中央に配置されるようにしていた。 コンテンツ内にはSVGで描画した円の中心にアイコンを配置していたのだけど、画面幅を変更するとSVGで描画した円が左右に動きアイコンがずれるような見え方をしていることに気づいた。 原因 この動きが奇妙過ぎて色々調べていたのだけど、気づけば他のボタン要素なども左右に動いているではないか… もう少し調べると画面幅が奇数の時に発生していることが分かった。 これは小数pxのブラウザ毎の解釈が異なることにより、Chromeだと 0.5 刻みになっていた。 またF… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.sassy-blog.com%2Fentry%2F2021%2F12%2F22%2F180000" title="画面幅を縮めたり広げたりすることで要素がカクカク左右や上下にずれる問題はマージンの自動算出による小数pxが原因 - Sassyブログ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn.user.blog.st-hatena.com/default_entry_og_image/99432425/163826466538537 Hatena Blog https://hatena.blog 2021-12-22 18:00:00 rich https://www.sassy-blog.com/entry/2021/12/22/180000 1.0 100%