CSS - самый маленький (по высоте) липкий элемент <td>не работает в Safari - PullRequest
Новая
       49

CSS - самый маленький (по высоте) липкий элемент <td>не работает в Safari

0 голосов
/ 03 апреля 2020

Если липкий элемент помещен внутрь самого маленького (по высоте) свойства <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>

1 Ответ

0 голосов
/ 09 апреля 2020

Я решил проблему, обернув position:sticky div в другой div, высота которого устанавливается с помощью javascript, равной высоте родительского элемента td. 

<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/

...