Bootstrap Google Chrome 中的卡片渲染问题

Question

您好，我尝试在 JSP 文件中填充 Bootstrap 卡片，但是 chrome 存在渲染问题，卡片变得不可见。它在 Firefox 中运行良好。我试过检查元素，没问题。但是当我尝试向下滚动时，卡片消失了。请帮我解决这个问题。

这是 HTML 的伪代码。

 <head>
    <script 
     src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" 
     crossorigin="anonymous"></script>
 </head>
 <div class="main-cards" id="reports">
           <%
            for(int i=0;i<10;i++){
               %> 
  <div class="card">
      <div class="card-title">ABC</div>
         <div class="card-title">XYZ</div>
     <script>
                    var chart={
                        pass:"10",
                        failed:"4",
                        blocked:"0",
                        skipped:"0",
                        notCompleted:"0",
                        total:"14"
                    }
                </script>

                <canvas id="<%=i%>" style="height: 180px"></canvas>
                <script>lineCharts(chart,"<%=i%>");</script>
           <div class="form-row mb-4">
                    <div class="col">
                <button class="btn" style="background-color: #3e62bd;color: white"  name="details"  onclick="window.open('SomeServlet?','details','width=800,height=800')">Details Report</button>
                    </div>
                    <div class="col">
                <button class="btn" style="background-color: #3e62bd;color: white"  name="stability"  onclick="window.open('SomeServlet?','stabilty','width=800,height=800')">Stability Report</button>
                    </div>
                </div>
           </div>
           <%
        }
        %>
         </div>

和CSS

.main-cards {
column-count: 3;
column-gap: 20px;
margin: 40px;
align-items: center;
display: block;
overflow-x: hidden;
 }
  .card {
display: flex;
flex-direction: column;
align-items: center;
width: 380px;
height: 500px;
background-color: white;
margin-bottom: 20px;
-webkit-column-break-inside: avoid;
padding: 24px;
box-sizing: border-box;
overflow-x: hidden;
}

JS文件：

function lineCharts(chart,id){

var pass = chart.pass;
var fail = chart.failed;
var blocked = chart.blocked;
var NotCompleted = chart.notCompleted;
var total = chart.total;
var skipped = chart.skipped;

var legend = [];
var TestData = [];
var background = [];

if(total>=0){
    legend.push("Total");
    TestData.push(total);
    background.push("#05a2f7");

}
if(pass>=0){
    legend.push("Pass");
    TestData.push(pass);
    background.push("#70d660");

}

if(fail>=0){
    legend.push("Failed");
    TestData.push(fail);
    background.push("#FF5A5E");

}
if(skipped>=0){
    legend.push("Skipped");
    TestData.push(skipped);
    background.push("#bf77d6");

}
if(blocked>0){
    legend.push("Blocked");
    TestData.push(blocked);
    background.push("#f2ca6d");
}

if(NotCompleted>0){
    legend.push("Not Completed");
    TestData.push(NotCompleted);
    background.push("#D3D3D3");
}
var ctxL = document.getElementById(id).getContext('2d');
var myBarChart = new Chart(ctxL, {
    "type": "horizontalBar",
    "data": {
        "labels": legend,
        "datasets": [{
            "label": "Pass Fail Details",
            "data": TestData,
            "fill": false,
            "backgroundColor": background,
            "borderColor": background,
            "borderWidth": 1
        }]
    },
    "options": {
        "scales": {
            "xAxes": [{
                "ticks": {
                    "beginAtZero": true
                }
            }]
        }
    }
});
myBarChart.update();

}

Answer 1

这样做：

    <div class="main-cards" id="reports">
    <%
            for(int i=0;i<10;i++){
               %>

    <div class="row">
        <div class="card">
            <div class="card-body">
                <div class="col-6">
                    <button class="btn" style="background-color: #3e62bd;color: white" name="details" onclick="window.open('SomeServlet?','details','width=800,height=800')">Details
                        Report</button>
                </div>
                <div class="col-6">
                    <button class="btn" style="background-color: #3e62bd;color: white" name="stability" onclick="window.open('SomeServlet?','stabilty','width=800,height=800')">Stability
                        Report</button>
                </div>

            </div>
        </div>

    </div>
    <%
        }
        %>
</div>

Answer 2

问题已解决。正在使用 bootstrap 的不同样式表之前的版本：

    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">

并更改为

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

现在渲染问题已经解决并显示正确的结果。

Bootstrap Google Chrome 中的卡片渲染问题

Bootstrap Card Render Problem in Google Chrome

html

javascript

jsp

google-chrome

chart.js