CSS translateY и ZOOM вызывают разрывы между div

Question

Шаги воспроизведения

Открыть https://codepen.io/rohinikumar4073/pen/jOPPrWr в Chrome и увеличить до 125% Вы можете наблюдать промежутки между divs. Эти пропуски не появляются, когда translate равно 0px

  <div class="tree" style="transform: translateY(50px);background:red;">
  
    <div style="background: rgb(229, 213, 232);">
     Kamquats
    </div>
    <div  style="background: rgb(229, 213, 232);">
    Lemons
    </div>
   </div>

Увеличено до 125% и появляется красный фон