在Blazor Virtualize 构建的卡片列表中，有时会看到首先出现一个空白区域，随后才出现实际的卡片数据。这是因为 Virtualize 组件使用了一个未经处理的 CSS 样式，以存储和管理要进行虚拟化的元素。

要解决这个问题，需要在 CSS 中设置一些额外的样式规则。 首先，需要在组件的样式表中添加以下规则：

body .virtualize > *:first-child {
  position: relative !important;
  top: -10000px !important;
  pointer-events: none !important;
}

body .virtualize > *:first-child ~ div {
  pointer-events: auto !important;
}

在这个示例中，我们对所有 .virtualize div 之前的第一个元素应用样式。它位于文档中的指定位置（通过 top 偏移）以隐藏离屏区域的空间，然后设置 pointer-events：none ，以防止用户点击该区域。

在第二个规则中，我们将 pointer-events 设置为 auto ，以确保在下面进入视图时，所有内容都可见且可交互。

最后，我们应用样式到父元素，以便于继承和在整个网站中重用。

.virtualize > div {
  position: relative !important;
  top: 0 !important;
  pointer-events: auto !important;
}

这个样式类可应用到单个虚拟化列表中的元素，也可以在全局样式表中使用，以在整个网站中统一应用。