Question

Screenshot of "torn" webpage 我正在使用Firefox 54（64位），我的应用程序正在使用AngularJS Material和AngularJS。我无法弄清楚为什么重绘我的网页后大部分时间都无法正确显示。它好像被撕裂了＃34;我添加了一个按钮，特别是用于重绘，使用以下代码：

var scanPageElt = document.getElementById("scanPage");
// Force page redraw (buggy with tearing/banding)
scanPageElt.style.display = 'none';
scanPageElt.offsetHeight;
scanPageElt.style.display = '';
console.log("Page redrawn!");

它会更新显示屏，点击3-4次后，它会设法正确显示页面。

我有主HTML文件，其中包含有问题的部分。以下是包含的部分：

<div class="row no-padding" ng-if="mainView === false"> <!-- Interactive View for docs/fingers/face scanning -->
    <div class="col-lg-12">
        <div class="row roundbox boxshadow" style="max-height:930px; min-height:930px;max-width:1890px; min-width:1890px;background-color:{{scanBackgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
        <div ng-include="currScanPage"/></div>
    </div>          
</div>

现在这里是发生问题的HTML文件：

<div class="row header">
  <div class="col-lg-11">
    <span class="title" style="float:left; margin-top:7px"><strong>{{currentWorkflowStepTitle}}</strong></span>
  </div>
  <div class="col-lg-1">
    <div class="col-lg-12">
      <md-button aria-label="minimize" class="header-button" ng-click="minimizeScanView()" style="float:right">
        <img src="img/icons/minimize_window.svg" style="width:170%; height:170%; margin-top:-11px; margin-left:-7px">
      </md-button>
    </div>
  </div>
</div>
<div class="row command">
  <span style="margin-left: 40px">{{view_scan_current_message}}</span>
</div>
<div class="row" style="margin-left:10px; margin-top:10px">
  <div class="col-lg-6 passportscanbox roundbox boxshadow small-margin" style="max-width:900px; min-width:900px;min-height:800px; max-height:800px">
    <div class="row small-header">
      <span class="medium-title"><strong>Left Hand Information</strong></span>
    </div>
    <div class="row">
      <div class="col-lg-6">
        <object id="svgIgloo_left" data="img/igloo_left.svg" style="width: 250%; height: 250%; margin-left: -20px"></object>
      </div>
      <div class="col-lg-6 flex-container">
        <div class="row" style="margin: auto">
          <div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
            <div class="row small-header">
              <span class="small-title"><strong>Index Finger</strong></span>
            </div>
            <div>
              <img ng-if="fingerprintScan[1] !=''" data-ng-src="{{fingerprintScan[1]}}" style="width: 100%; height: 100%; margin: auto">
              <img ng-if="fingerprintScan[1] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto">
            </div>
          </div>
        </div>
        <div class="row" style="margin: auto">
          <div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
            <div class="row small-header">
              <span class="small-title"><strong>Middle Finger</strong></span>
            </div>
            <div>
              <img ng-if="fingerprintScan[2] !=''" data-ng-src="{{fingerprintScan[2]}}" style="width: 100%; height: 100%; margin: auto">
              <img ng-if="fingerprintScan[2] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto">
            </div>
          </div>
        </div>
        <div class="row" style="margin: auto">
          <div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
            <div class="row small-header">
              <span class="small-title"><b>Ring Finger</b></span>
            </div>
            <div>
              <img ng-if="fingerprintScan[3] !=''" data-ng-src="{{fingerprintScan[3]}}" style="width: 100%; height: 100%; margin: auto" />
              <img ng-if="fingerprintScan[3] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
            </div>
          </div>
        </div>
        <div class="row" style="margin: auto">
          <div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
            <div class="row small-header">
              <span class="small-title"><b>Little Finger</b></span>
            </div>
            <div>
              <img ng-if="fingerprintScan[4] !=''" data-ng-src="{{fingerprintScan[4]}}" style="width: 100%; height: 100%; margin: auto" />
              <img ng-if="fingerprintScan[4] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
            </div>
          </div>
        </div>
        <div class="row" style="margin: auto">
          <div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
            <div class="row small-header">
              <span class="small-title"><b>Thumb Finger</b></span>
            </div>
            <div>
              <img ng-if="fingerprintScan[0] !=''" data-ng-src="{{fingerprintScan[0]}}" style="width: 100%; height: 100%; margin: auto" />
              <img ng-if="fingerprintScan[0] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-6 passportscanbox roundbox boxshadow small-margin" style="max-width:900px; min-width:900px;min-height:800px; max-height:800px">
    <div class="row small-header">
      <span class="medium-title"><b>Right Hand Information</b></span>
    </div>
    <div class="row">
      <div class="col-lg-6 flex-container">
        <div class="row" style="margin: auto">
          <div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
            <div class="row small-header">
              <span class="small-title"><b>Index Finger</b></span>
            </div>
            <div>
              <img ng-if="fingerprintScan[6] !=''" data-ng-src="{{fingerprintScan[6]}}" style="width: 100%; height: 100%; margin: auto" />
              <img ng-if="fingerprintScan[6] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
            </div>
          </div>
        </div>
        <div class="row" style="margin: auto">
          <div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
            <div class="row small-header">
              <span class="small-title"><b>Middle Finger</b></span>
            </div>
            <div>
              <img ng-if="fingerprintScan[7] !=''" data-ng-src="{{fingerprintScan[7]}}" style="width: 100%; height: 100%; margin: auto" />
              <img ng-if="fingerprintScan[7] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
            </div>
          </div>
        </div>
        <div class="row" style="margin: auto">
          <div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
            <div class="row small-header">
              <span class="small-title"><b>Ring Finger</b></span>
            </div>
            <div>
              <img ng-if="fingerprintScan[8] !=''" data-ng-src="{{fingerprintScan[8]}}" style="width: 100%; height: 100%; margin: auto" />
              <img ng-if="fingerprintScan[8] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
            </div>
          </div>
        </div>
        <div class="row" style="margin: auto">
          <div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
            <div class="row small-header">
              <span class="small-title"><b>Little Finger</b></span>
            </div>
            <div>
              <img ng-if="fingerprintScan[9] !=''" data-ng-src="{{fingerprintScan[9]}}" style="width: 100%; height: 100%; margin: auto" />
              <img ng-if="fingerprintScan[9] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
            </div>
          </div>
        </div>
        <div class="row" style="margin: auto">
          <div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
            <div class="row small-header">
              <span class="small-title"><b>Thumb Finger</b></span>
            </div>
            <div>
              <img ng-if="fingerprintScan[5] !=''" data-ng-src="{{fingerprintScan[5]}}" style="width: 100%; height: 100%; margin: auto" />
              <img ng-if="fingerprintScan[5] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <object id="svgIgloo_right" data="img/igloo_right.svg" style="width: 250%; height: 250%; margin-left: -600px"></object>
      </div>
    </div>
  </div>
</div>

网页呈现为＆＃34;撕裂＆＃34;

0 个答案: