[解決済み] Bootstrap 4のカードコンポーネントにボックスシャドウを適用する

質問

カード部品に簡単な影をつけようとしています。 なぜかシャドウが不具合を起こし、ミラーリングされたように見えたり、位置がずれて見えたりします。

と関係があると思います。 margin-bottom が、それ以上にわからないことがある。

カードに影を持たせるには、どのような方法が正しいのでしょうか？

https://jsfiddle.net/qdjeuo65/

<style>
    .card {
      box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.26);
    }
    
</style>

<div class="card-columns">
    <div class="card">
        <div class="card-body">
            <div class="card-title">title</div>
            <div class="card-text">
                body
            </div>
        </div>
        <div class="card-footer">
            footer
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="card-title">title</div>
            <div class="card-text">
                body
            </div>
        </div>
        <div class="card-footer">
            footer
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="card-title">title</div>
            <div class="card-text">
                body
            </div>
        </div>
        <div class="card-footer">
            footer
        </div>
    </div>
</div>

ブラウザはChrome 84です。

解決方法は？

この問題により column-count で使用しているcssプロパティは card-columns クラスがあります。カードをフレックスで整列させたり transform: translateZ(0); に .card クラスを使用することで、回避することができます。