Анимация CSS3 не работает, если div: before float (WebKit)

Я хочу, чтобы мой текст мигал только с помощью CSS3. Он работает нормально. Однако, если я добавлю float:left в селектор div :before, он остановит анимацию от работы с WebKit (Safari/Chrome).

Для демонстрации откройте JSFiddle в WebKit, удалите float:left, чтобы увидеть, как он работает.

CSS

.blink_me:before {
  content: "Blink";
}

.blink_me {
  -webkit-animation: blinker 1.5s linear infinite;
  -moz-animation: blinker 1.5s linear infinite;
  -o-animation: blinker 1.5s linear infinite;
  animation: blinker 1.5s linear infinite; 
}
@keyframes blinker {  
  50% { opacity: 0.0; }
}

HTML:

<span class="blink_me"> </span>

Как я могу заставить его работать с float на селекторе?

Информация о BOUNTY: просто вознаграждение за существующий ответ, который, безусловно, заслуживает большего внимания.

ОТВЕТЫ

Ответ 1

Причина:

Это определенно связано с созданием слоя и ускоренным процессом рендеринга в Webkit. Взгляните на все демо в этом ответе после включения "Показать красящие ребра" и "Показывать слои композитных слоев" в Dev Tools.

Когда запускается какая-либо демоверсия, вы увидите несколько зеленых и оранжевых ящиков. Зеленые прямоугольники представляют собой прямоугольники красок, тогда как оранжевые прямоугольники представляют собой слои композиций, которые создаются механизмом рендеринга для ускоренного рендеринга. Во время процесса рендеринга Webkit (и Blink) не всегда перерисовывают всю страницу. Изменены только затронутые области (слои) страницы (для выполнения).

С поплавком:

В этом фрагменте вы увидите, что движок рендеринга создает один красящий прямоугольник, слой компоновки для страницы и еще один прямоугольник красок, слой компоновки для элемента span ( "Некоторое содержимое" ). Поскольку элемент span является элементом inline, он не генерирует главный блок-уровень блока, который содержит его потоковые поля и сгенерированное содержимое. Это (в моем понимании) делает псевдоэлемент плавающим по отношению к корневому элементу. Это также означает, что псевдоэлементная позиция на экране не зависит от родительского элемента span (на самом деле, если вы даете отрицательный отступ для span, вы заметите, что содержимое перекрывается, тогда как если display: block задано для span, отрицательное поле перемещает содержимое псевдоэлемента также влево). Поскольку состояние плавающего элемента не влияет на диапазон, и поскольку он также не получает свой собственный слой композиции, его непрозрачность не изменяется анимацией.

.blink_me:before {
  content: "Blink";
  float: left;
}
.blink_me {
  -webkit-animation: blinker 1.5s linear infinite;
  -moz-animation: blinker 1.5s linear infinite;
  -o-animation: blinker 1.5s linear infinite;
  animation: blinker 1.5s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0.0;
  }
}
<span class="blink_me">Some content</span>