I’m experiencing a rendering issue in Safari with a scrollable flexbox container that contains a large number of child elements. When there are only a few child elements, the scrolling and rendering work fine. However, with a large number of children, Safari appears to lazy load the child elements, resulting in blank areas during scrolling. This behavior does not occur in Chrome, where everything renders smoothly.My safari version is Version 16.6.

see this is the sample code

<div class="scrollableContainer">
      <ul class="container"/>
        <li class="child">child </li>
      </ul>
 </div>


css : 

.scrollableContainer{
  height: calc(100vh - 160px);
  overflow : auto;

}

.container {
   display : flex;
   flex-wrap : warp;
   list-style: none;
}

.child {
   max-width: 24% !important;
   flex: 0 24%;
   margin: 0 .5% 1%;
   position: relative;
   overflow: hidden;
   scroll-snap-align: start;
   cursor: pointer;
}