CSS-最小的粘滞元素（按高度） 在Safari中不起作用

Question

如果粘性元素放置在最小（按高度）<td>内，但元素的position:sticky和position:-webkit-sticky属性在Safari（台式机和移动版）中不起作用。

示例：https://jsfiddle.net/Ldg820c7/3/

<table>
    <tr>
    <td valign = "top">
        <div style="height:1000px; width:100px; border:1px solid red;"></div>
    </td>
    <td valign = "top">
        <div style="height:10px; width:100px; border:1px solid black; position:sticky; position: -webkit-sticky; top:10px; "></div>
    </td>
</tr>
</table>

Answer 1

我通过将position:sticky div包装到另一个div中解决了这个问题，该高度通过使用与父级td的高度相等的javascript设置。

<table>
    <tr>
    <td valign = "top">
        <div style="height:1000px; width:100px; border:1px solid red;"></div>
    </td>
    <td id="td" valign = "top">
        <div id="wrap">
        <div style="height:10px; width:100px; border:1px solid black; position:sticky; position: -webkit-sticky; top:10px; "></div>
        </div>
    </td>
</tr>

$('#wrap').height( $('#td').height() );

示例：https://jsfiddle.net/mqvpb1r5/