Safari打印时position:fixed元素仅首页显示无法每页重复问题

Safari打印渲染逻辑和Chromium内核浏览器存在差异，单纯靠position: fixed无法实现全浏览器每页固定元素效果，你的现有代码还有三个加剧兼容问题的配置：

1. 全局给所有div设置了break-inside: avoid !important，这个规则会强制所有div元素不可被分页拆分，你的logo容器会被判定为仅属于第一页的不可拆分块，后续分页不会重复渲染
2. Safari本身对打印场景下position: fixed元素的跨分页重复渲染存在长期未修复的bug，哪怕修复CSS冲突，部分旧版Safari依旧不会在每页显示fixed元素
3. 你给body设置的page-break-after: always不仅没必要，还会导致文档末尾强制生成空白页。

优先用@page背景方案，不需要额外插入DOM元素，兼容性最好：

1. 调整打印媒体查询CSS，移除有问题的全局规则，用页面边距预留logo位置，直接把logo设为每页固定背景：

@media print {
  /* 移除之前错误的body分页规则 */
  body {
    page-break-after: auto;
  }

  /* 配置打印页面边距，右下角预留logo空间，直接把logo设为页面固定背景 */
  @page {
    margin: 20mm 20mm 25mm 20mm;
    background: url('/images/math-medic-logo.png') no-repeat right bottom 8mm;
    background-size: 15mm auto; /* 按你需要的logo尺寸调整 */
  }

  /* 收窄原来的全局div规则范围，不要作用于所有div，仅作用于你正文内容的容器 */
  .print-content div {
    break-inside: avoid !important;
    font-size: 12px !important;
  }
  span {
    font-size: 12px !important;
  }

  /* 隐藏原来单独写的fixed定位logo元素，不需要再用 */
  .print-logo {
    display: none !important;
  }
}

2. 如果需要更灵活控制logo的样式（比如加透明度、调整层级不遮挡内容），可以用分页块兜底方案：
   • 先把打印内容按A4纸可打印高度（大概277mm）拆分为独立的分页块，给每个分页块加class="print-page-block"
   • 每个分页块末尾插入logo元素，改用绝对定位：

   <div class="print-page-block">
     <!-- 该页正文内容 -->
     <div class='print-logo hidden print:block print:absolute print:bottom-7 print:right-8'>
        <img src='/images/math-medic-logo.png' />
     </div>
   </div>
   

   • 补充对应CSS：

   @media print {
     .print-page-block {
       position: relative;
       min-height: 277mm;
       page-break-after: always;
     }
     /* 移除全局div的break-inside规则 */
     div {
       break-inside: auto !important;
       font-size: 12px !important;
     }
     /* 仅给正文内容块设置不可拆分 */
     .print-content-item {
       break-inside: avoid !important;
     }
   }
   

• 永远不要给所有div全局设置break-inside: avoid !important，这个规则会打乱浏览器的自动分页逻辑，引发大量空白页、元素丢失问题
• 打印场景下跨浏览器固定元素不要依赖position: fixed，目前只有Chromium内核浏览器支持fixed元素跨分页重复渲染，Safari、Firefox都存在兼容问题
• page-break-after: always仅需要加在明确需要分页的块级元素上，不要加在body、html这类根节点上。

内容的提问来源于stack exchange，提问作者SavedCity