我正在使用2个JavaScript库。第一个是gridstack.js，通过它我可以建立可拖放的div元素，而使用chart.js则可以实现图表。现在的问题是，在图表上重新显示带有图表的gridstack div元素大小正确，而在Safari图表上却没有显示。

Chrome

Safari

home.blade.php

<style type="text/css">
      .povr{ margin-top:50px;}

      @media (max-width: 1060px) {
      .grid-stack-item {
        position: relative !important;
        width: auto !important;
        left: 0 !important;
        top: auto !important;
        margin-bottom: 20px;

      }
      .grid-stack-item .ui-resizable-handle {
        display: none;
      }

      .grid-stack {
        height: auto !important;
      }
    }

    .container-fluid{
      margin-left: 0;
    }
    .grid-stack-item-content{
        box-shadow: 0 1px 2px rgba(0,0.15);
        transition: box-shadow 0.3s ease-in-out;

    }
    .grid-stack-item-content:hover {
      box-shadow: 0 5px 15px rgba(0,0.8);
    }

    #chart {
    position: relative;
    width:99.9% 
    }

#chart > .monitoring-chart {
    position: absolute;
    left: 0;
    top: 0;

}

</style>


        <div class="grid-stack" data-gs-width="12" data-gs-animate="yes"> 
              <div class="grid-stack-item" data-gs-x="{{$loginElement->data_gs_x}}" data-gs-y="{{$loginElement->data_gs_y}}" data-gs-width="{{$loginElement->data_gs_width}}" data-gs-height="{{$loginElement->data_gs_height}}" id="{{$loginElement->id}}" data-element-id="{{$loginElement->element_id}}"> 
                                      @include('dashboard.login_tile') 
                             </div>   

                              <div class="grid-stack-item" data-gs-x="{{$uploadElement->data_gs_x}}" data-gs-y="{{$uploadElement->data_gs_y}}" data-gs-width="{{$uploadElement->data_gs_width}}" data-gs-height="{{$uploadElement->data_gs_height}}" id="{{$uploadElement->id}}" data-element-id="{{$uploadElement->element_id}}"> 
                                     @include('dashboard.upload_tile')
                              </div>
       </div>

login.blade.php

<div class="card grid-stack-item-content">
      <div class="card-header container-fluid" id="dashboard-header">
                <div class="row dashboard-row">
                    <div class="col-3 dashboard-icon-div text-center">
                        <h1 class="dashboard-h1"><i class="fas fa-sign-in-alt" aria-hidden="true"></i></h1>
                    </div>
                    <div class="col-5">
                        <h4 class="card-title dashboard-card-title"> {{ trans('app.logins_upper_firsts') }}</h4>
                    </div>    
                        <button type="button" class="btn btn-card-tool ml-auto" id="authDaterange">
                                <i class="fa fa-calendar" aria-hidden="true"></i>
                                <span>{{ trans('app.last_7_days_upper_first') }}</span>
                                <i class="fa fa-caret-down" aria-hidden="true"></i>
                         </button>

                </div>
    </div>
    <div class="card-body">

      <div class="chart" id="chart">

        <canvas class="monitoring-chart" id="authChart" style="height: 150px"></canvas>

      </div>
    </div>
</div>