🦊

progressバーがFirefoxで表示したときだけデカい！時の解決策

2025/05/16に公開

状況

progressのwidthが100%の時に、Firefoxで表示した時のみ親要素からはみ出たりheightが大きくなってしまう。

対策前のコード

HTML

<div class="progress_bar">
    <progress max="100" value="30"></progress>
</div>

CSS

.progress_bar {
    outline: 1px solid red;
    progress {
        -webkit-appearance: none;
        -moz-appearance: none;
        border-radius: 9999px;
        width: 100%;
        height: 20px;
        padding: 3px;
        background-color: rgb(45,55,72);
        &::-webkit-progress-bar {
            background-color: rgb(45,55,72);
            border-radius: 9999px;
        }
        &::-webkit-progress-value {
            background-color: rgb(255, 136, 76);
            border-radius: 9999px;
        }
        &::-moz-progress-bar {
            background-color: rgb(255, 136, 76);
            border-radius: 9999px;
        }
    }
}

解決策

progressにbox-sizing: border-box;を指定してあげると綺麗に収まってくれるようです。

対策後のCSS

.progress_bar {
    outline: 1px solid red;
    progress {
        -webkit-appearance: none;
        -moz-appearance: none;
+       box-sizing: border-box;
        border-radius: 9999px;
        width: 100%;
        height: 20px;
        padding: 3px;
        background-color: rgb(45,55,72);
        &::-webkit-progress-bar {
            background-color: rgb(45,55,72);
            border-radius: 9999px;
        }
        &::-webkit-progress-value {
            background-color: rgb(255, 136, 76);
            border-radius: 9999px;
        }
        &::-moz-progress-bar {
            background-color: rgb(255, 136, 76);
            border-radius: 9999px;
        }
    }
}

なぜ起きた？

どうやらFirefoxはデフォルトのbox-sizingがcontent-boxらしく、そのためpaddingやborderのサイズが追加されてその分大きくなる（はみ出る）んですね。

状況

解決策

なぜ起きた？

Discussion