Question

我有一个关于画布HTML5的问题，特别是它在Safari中的渲染。这种渲染在Firefox和Chrome上很好，但在Safari中则不行。

这是在Firefox上捕获这个画布：

并使用Safari进行捕获：

正如您所看到的，Safari存在一个问题：左侧菜单（质量，初始位置，初始速度）被展平（参见压缩的3个参数行）。

我不知道这个问题可能来自哪里。您可以在this link上查看此呈现。

以下是代表此HTML5画布的代码部分：

<div class="container" style="max-width:750px;">
         <table> 
         <tr>
         <td colspan="3">
         <div class="col-md-12"> 
           <label for="slider"><b>Axis lengths</b></label>
             <br>
             <input id="slider1" type="hidden" class="span2" value="" data-slider-min="4.8" data-slider-max="235.2" data-slider-step="4.8" data-slider-value="[81.6,158.4]" /> 
            </div>
         </td>
         <td rowspan="5">
<canvas id="pendulumCanvas" width="500" height="500" style="border:1px solid black;">
</canvas>
     </td>
         </tr>
     <tr>
           <td class="col-md-4">
            <label for="lab1" tabindex="-1"><b>$\mathbf{M_{1}}$</b></label>
            <input type="text" class="form-control input-sm" id="lab1" tabindex="1"/>
            </td>
              <td class="col-md-4">
            <label for="lab2" tabindex="-1"><b>$\mathbf{M_{2}}$</b></label>
            <input type="text" class="form-control input-sm" id="lab2" tabindex="2"/>
            </td>
      <td class="col-md-4">
            <label for="lab3" tabindex="-1"><b>$\mathbf{M_{3}}$</b></label>
            <input type="text" class="form-control input-sm" id="lab3" tabindex="3"/>
            </td>
            </tr>
     <tr>
           <td class="col-md-4">
            <label for="lab4" tabindex="-1"><b>$\mathbf{\Theta_{1}}$</b></label>
            <input type="text" class="form-control input-sm" id="lab4" tabindex="4"/>
            </td>
              <td class="col-md-4">
            <label for="lab5" tabindex="-1"><b>$\mathbf{\Theta_{2}}$</b></label>
            <input type="text" class="form-control input-sm" id="lab5" tabindex="5"/>
            </td>
      <td class="col-md-4">
            <label for="lab6" tabindex="-1"><b>$\mathbf{\Theta_{3}}$</b></label>
            <input type="text" class="form-control input-sm" id="lab6" tabindex="6"/>
            </td>
    </tr>
    <tr>
           <td class="col-md-4">
            <label for="lab7" tabindex="-1"><b>$\mathbf{\dot{\Theta}_{1}}$</b></label>
            <input type="text" class="form-control input-sm" id="lab7" tabindex="7"/>
            </td>
              <td class="col-md-4">
            <label for="lab8" tabindex="-1"><b>$\mathbf{\dot{\Theta}_{2}}$</b></label>
            <input type="text" class="form-control input-sm" id="lab8" tabindex="8"/>
            </td>
      <td class="col-md-4">
            <label for="lab9" tabindex="-1"><b>$\mathbf{\dot{\Theta}_{3}}$</b></label>
            <input type="text" class="form-control input-sm" id="lab9" tabindex="9"/>
            </td>
        </tr>
        <tr>
      <td class="col-md-4">
            <label for="lab3" tabindex="-1"><b>$\mathbf{K_{1}}$</b></label>
            <input type="text" class="form-control input-sm" id="lab10" tabindex="10"/>
            </td>
      <td class="col-md-4">
            <label for="lab3" tabindex="-1"><b>$\mathbf{K_{2}}$</b></label>
            <input type="text" class="form-control input-sm" id="lab11" tabindex="11"/>
            </td>
      <td class="col-md-4">
            <label for="lab3" tabindex="-1"><b>$\mathbf{K_{3}}$</b></label>
            <input type="text" class="form-control input-sm" id="lab12" tabindex="12"/>
            </td>
        </tr>
            <tr>
            <td colspan="3">&nbsp;</td>
            <td>
     <div class="center">
         <button type="button" id="startButtonId" class="btn btn-primary" tabindex="13">Start</button>
         <button type="button" id="resetButtonId" class="btn btn-default" tabindex="14">Reset</button>
     </div>     
         </td>
         </tr>
            </table>
      </div>

<br><br>
<br>
<script type="text/javascript" src="./js/triple_pendulum.js">
</script>
</td>

如果有人能给我一些线索来解决Safari上这种奇怪的渲染问题。

此致

Answer 1

由于各种浏览器中表格单元格之间分配额外空间的方式，您会看到不同之处。在当前版本的Safari中，每个单元只占用所需的空间。这会在最后一个单元格上留下一堆额外的空间。下面的代码演示了这一点。

#canvas, #cell-1, #cell-2 {
  color: white;
  font-family: sans-serif;
}

#canvas {
  background-color: green;
  padding: 100px;
}

#cell-1 {
  background-color: red;
}

#cell-2 {
  background-color: blue;
}

<table>
  <tbody>
    <tr>
      <td id="cell-1">CELL 1</td>
      <td id="canvas" rowspan="2">CANVAS</td>
    </tr>
    <tr>
      <td id="cell-2">CELL 2</td>
    </tr>
  </tbody>
</table>

这个问题有很多解决方案。您可以尝试向td元素添加一些填充，如下所示。

#canvas, #cell-1, #cell-2 {
  color: white;
  font-family: sans-serif;
}

#canvas {
  background-color: green;
  padding: 100px;
}

#cell-1, #cell-2 {
  padding: 50px 0;
}

#cell-1 {
  background-color: red;
}

#cell-2 {
  background-color: blue;
}

<table>
  <tbody>
    <tr>
      <td id="cell-1">CELL 1</td>
      <td id="canvas" rowspan="2">CANVAS</td>
    </tr>
    <tr>
      <td id="cell-2">CELL 2</td>
    </tr>
  </tbody>
</table>

更好的解决方案可能是查看您对表的使用以及如何使用CSS和定位甚至flexbox来完成类似的结果。

Safari上的Canvas HTML5渲染 - 与Firefox和Chrome相比，结果奇怪

1 个答案: