CSSで背景を斜めにした際にスマホで表示されなくなる不具合について

Question

前提・実現したいこと

初心者です。あるsectionについて、CSSで背景を斜めにしています。

PCのchromeでは正常に表示されているのですが、iPhoneのchrome/safariではスクロール時に背景が点滅してしまうので、これを直したいです。

下記のコードのどこに問題があるのか分からずに困っています。不審な点があれば教えて下さい。

発生している問題・エラーメッセージ

特定のsectionに下記のcssを適用させて斜めの白い背景を設定しています。
スマホで見た際にスクロールするとbackground-color:whiteで指定している白い背景が点滅してしまいます。

該当のソースコード

.gradient {
    overflow: hidden;
    padding: calc(100vw * 0.08) 0 calc(100vw * 0.11) 0;
    position: relative;
}

.gradient:before {
    content: '';
    position: absolute;
    background-color: white;
    transform-origin: center;
    -webkit-transform-origin:center;
    -moz-transform-origin:center;
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    width: 200vw;
    height: calc(100% - 0.11 * (0.11 * 50% + 50vw) * 2);
    top: calc(0.11 * (0.11 * 50% + 50vw));
    left: -50vw;
    z-index: -1;
}