Html iOS Safari中的CSS背景图像在URL栏折叠时闪烁（仅限凹口）

我有一些利用背景图像的div元素。我遇到了一个bug，它会使图像（而不是渐变叠加）闪烁，只有在带有凹口（X、11等）的iPhone上处于纵向模式时，并且只有在滚动时才会使URL栏崩溃。我认为这与URL使用的字体有关，随着URL栏的缩小，字体会发生变化。它似乎正在重新加载div的自定义属性

[class*="imageblock-"] {
   --bgImage: url('../images/block_backgrounds/congress.png');
   --bgPosition: center;
   background: linear-gradient(#00286800 70%,#002868FF 100%), var(--bgImage);
   background-size: cover;
   background-position: var(--bgPosition);
}

<div class="imageblock" style="--bgImage: url('../images/block_backgrounds/whitehouse.jpg');"></div>

编辑：这似乎是由于使用自定义属性设置背景图像造成的

[class*="imageblock-"] {
   --bgImage: url('../images/block_backgrounds/congress.png');
   --bgPosition: center;
   background: linear-gradient(#00286800 70%,#002868FF 100%), var(--bgImage);
   background-size: cover;
   background-position: var(--bgPosition);
}

<div class="imageblock" style="--bgImage: url('../images/block_backgrounds/whitehouse.jpg');"></div>

[class*=“imageblock-”]{
--bgImage:url（'../images/block_backgrounds/congress.png'）；
--位置：中心；
背景：线性梯度（#00286800 70%，#00286800 ff 100%），var（--bgImage）；
背景尺寸：封面；
背景位置：var（--bgPosition）；
}