CSS-анимация не работает на вики-страницах Github - PullRequest
Новая
       39

CSS-анимация не работает на вики-страницах Github

0 голосов
/ 31 октября 2019

Я пытаюсь написать вики для этого проекта на Github. Я хочу, чтобы вики включала CSS-анимацию, но ни одна из этих анимаций не появляется на вики-странице.

Когда я редактирую источники Markdown с помощью кода Visual Studio, анимации отлично смотрятся в окне предварительного просмотра Markdown. Но по какой-то причине они не отображаются на реальной веб-странице вики-сайта Github, что наводит меня на мысль, что это может быть более серьезной проблемой совместимости Github с CSS-анимациями

Вот соответствующие части таблицы стилей: 

canvas {
    width: 300px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;

    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 0.5s;

    animation-iteration-count: infinite;
    animation-duration: 0.5s;
}

.dash {
    -webkit-animation-name: dash;
    -webkit-animation-duration: 2s;
    animation-name: dash;
    animation-duration: 2s;
}

@-webkit-keyframes dash {
    0%      { background: url(dashAnimation/frame1.png); }
    29%     { background: url(dashAnimation/frame1.png); }

    30%     { background: url(dashAnimation/frame2.png); }
    59%     { background: url(dashAnimation/frame2.png); }

    60%     { background: url(dashAnimation/frame3.png); }
    79%     { background: url(dashAnimation/frame3.png); }

    80%     { background: url(dashAnimation/frame4.png); }
    85%     { background: url(dashAnimation/frame5.png); }
    90%     { background: url(dashAnimation/frame6.png); }
    100%    { background: url(dashAnimation/frame7.png); }
}

@keyframes dash {
    0%      { background: url(dashAnimation/frame1.png); }
    29%     { background: url(dashAnimation/frame1.png); }

    30%     { background: url(dashAnimation/frame2.png); }
    59%     { background: url(dashAnimation/frame2.png); }

    60%     { background: url(dashAnimation/frame3.png); }
    79%     { background: url(dashAnimation/frame3.png); }

    80%     { background: url(dashAnimation/frame4.png); }
    85%     { background: url(dashAnimation/frame5.png); }
    90%     { background: url(dashAnimation/frame6.png); }
    100%    { background: url(dashAnimation/frame7.png); }
}

Это фактический исходный код уценки, который должен отображаться на вики-странице «Игрок»: 

<link href="resources/style.css" rel="stylesheet" type="text/css" />
<canvas class="dash"></canvas>

Наконец, вот ссылка на фактическийвики-страницаКак видите, веб-страница абсолютно ничего не отображает. Но должна быть забавной маленькой анимацией, воспроизводимой из-за тега <canvas> в исходном файле уценки

Основная идея состоит в том, чтобы прикрепить различные атрибуты .class HTML к различным анимациям,а затем просто измените атрибут class="class-name" тега <canvas>, чтобы изменить отображаемую анимацию. Эта стратегия творит чудеса в окне предварительного просмотра Markdown кода Visual Studio, но не отображается в вики Github

1 Ответ

2 голосов
/ 31 октября 2019

Это никогда не будет работать на GitHub.com по соображениям безопасности.

HTML-дезинфицирующее средство Github удаляет теги <link> и <canvas>. Если вы используете в браузере инструменты «просмотреть исходный код» или «проверить», вы увидите, что упаковка <div> полностью пуста. Начиная со строки 957 исходного кода HTML для этой страницы, мы находим: 

<div id="wiki-body" class="mt-4 flex-auto min-width-0 gollum-markdown-content instapaper_body">
    <div class="markdown-body">


    </div>

</div>

Обратите внимание, что внутренняя <div> полностью пуста, без содержимого вообще. Для сравнения, тот же раздел исходного кода HTML для другой страницы в вашей вики выглядит так: 

<div id="wiki-body" class="mt-4 flex-auto min-width-0 gollum-markdown-content instapaper_body">
    <div class="markdown-body">
      <p>Welcome to the Flight wiki!</p>
<p>Here, you will find a formal description of the mechanics of the game, as well as some ideas about putting those mechanics together into challenging and compelling level designs.</p>

    </div>

</div>

Очевидно, что вывод HTML вашего содержимого Markdown содержится в этом <div>. Итак, мы знаем, что ищем правильное местоположение.

Это можно проверить, когда GitHub публикует свой код разметки. Для начала, README github / markup перечисляет санацию HTML как шаг 2 5-шагового процесса. Ранее этот шаг связывался с исходным кодом для этого дезинфицирующего средства . Однако в последнее время ссылка была удалена . Если они используют что-то новое и необычное, возможно, оно еще строже, чем старое.

Несмотря на это, если посмотреть на исходный код старого дезинфицирующего средства, ясно, что ни теги <link>, ни <canvas>включены в белый список разрешенных тегов, и поэтому они будут полностью удалены из документа. И это имеет смысл, так как оба типа тегов могут использоваться для запуска стороннего кода на сайте GitHub, что может стать серьезной уязвимостью безопасности.

Если вы хотите опубликовать что-то подобное, вы должны сделать это на сайте, который вы полностью контролируете. Если вы хотите придерживаться GitHub, вы можете посмотреть на GitHub Pages в качестве опции.

...