Bootstrap 模式根据 Chrome 中的背景高度多次打印同一页面

Question

我有一个模态，当它弹出时它有一个打印按钮来打印模态的内容。我遵循了here和here的一系列答案，这些都是尝试让引导模式完全打印的好资源，但是，我似乎面临着与Chrome相关的错误。我无法在 Safari、FireFox 或 Edge 中重现此内容。

发生的事情是，当我加载模态并尝试仅打印模态的内容时，它将尝试多次打印相同的确切页面，并且它尝试打印的页数等于正文的页数打印时。

阅读可能会令人困惑，所以请访问我的小提琴并查看问题。当您单击打印时，您会注意到它尝试打印我的模态内容 5 次，因为背景正文是 5 个打印页面的内容。

我相信这是因为我的模态有这个属性body.modal-open { visibility: hidden; }并且visibility: hidden;仍然占用页面空间......但是如果我这样做，body.modal-open { display: none; }那么它将隐藏我的模态的所有内容并打印一个空白页。

这是我的 CSS：

@media print {

  body.modal-open {

    visibility: hidden;

  }

  body.modal-open .modal .modal-header,

  body.modal-open .modal .modal-body {

    visibility: visible;

  }

   .close, #printBtn {

     display: none;

   }

}

这是我的 HTML：启动演示模式

<div class="modal-must-live-inside-of-this-body-content">

<!-- Modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

        <h4 class="modal-title" id="myModalLabel">Modal title</h4>

      </div>

      <div class="modal-body">

        <button id="printBtn">

            Print this modal

        </button>

        <br /><br />

        Note: This should *ONLY* Print the contents (title, body, etc) of the modal when you click the "Print this modal" button. Which it does, however since the background body content is 12 pages worth of text it prints this same modal 12 times...

        <br /><br />

        I believe this is due to the fact that the background body has the `visibility: hidden` instead of `display: none`.

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

      </div>

    </div>

  </div>

</div>