Содержимое Base64 в псевдоэлементе не отображается в Chrome - PullRequest
0 голосов
/ 25 октября 2018

Я создал пользовательский флажок, используя псевдоэлемент :: before для метки, как и должно быть.Затем я понял, что на самом деле он должен иметь флажок в спецификации проекта, и поэтому я добавил его в атрибут содержимого.Через постпроцессор он был закодирован как base64.Он очень хорошо работает в Firefox - к сожалению, в Chrome он вообще не отображается

Ожидаемый результат (скриншот из Firefox):

Expected result

Что мы получаем:

Result on chrome

После некоторой путаницы кажется, что все дело в том, что псевдоэлемент :: before отображается как flex (но таким образом я могу расположить его правильно).

У вас есть идеи, почему это так работает - или как я могу обойти это?

Минимальный рабочий пример: https://codepen.io/anon/pen/zmyEpo?editors=1111

HTML:

<div class="checkbox">
  <input type="checkbox" name="" id="" class="checkbox__input">
  <label class="checkbox__label">Label</label>
</div>

CSS:

.checkbox__label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox__label::before {
  content: '';
  width: .8em;
  height: .8em;
  border: 3px solid;
  margin-right: .5em;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .3em;
  border-radius: 50%;

  box-shadow: inset 0 0 0 2em #000;
  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ii8+PC9zdmc+);
}

.checkbox__input {
  display: none;
}

Редактировать: SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#FFF" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>

1 Ответ

0 голосов
/ 26 октября 2018

Работает, если вы добавляете width и height в SVG:

content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 -50 512 512'%3E %3Cpath fill='%23FFF' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E %3C/svg%3E");

(изменено с Base64-кодирования на URL-кодирование для упрощения редактирования)

Обновленная ручка: https://codepen.io/Sphinxxxx/pen/YJddQq

...