Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Единый форум поддержки » Справочная » Бегущая строка, тег <marquee> больше браузерами не поддерживается

Бегущая строка, тег <marquee> больше браузерами не поддерживается

Страница: 1

Сообщений 1 страница 2 из 2

1

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7648
  • Уважение: +6216
  • Позитив: +6726
  • Пол: Мужской
  • Последний визит:
    Чт, 26 Мар 2026 11:10:30

Тег <marquee> - является старым давно устаревшим HTML тегом, который никогда не был частью стандарта HTML, но до недавнего времени поддерживался браузерами. Но с одним из последних обновлений Хром этот тег перестал поддерживаться. Доказательством этого является то, что стал Хром выдавать на этот тег:

:host {
    display: inline-block;
    overflow: hidden;
    text-align: initial;
    white-space: nowrap;
}

Это является симптомом, что Хром начал тег <marquee> выпиливать на уровне движка.

<marquee> в Chrome теперь оборачивается во внутренний Web Component / Shadow DOM.

- :host — это селектор Shadow DOM
- раньше <marquee> был “магическим тегом”
- теперь его поведение заменяют на заглушку-компонент

Раньше <marquee>:

- сам двигал контент
- имел внутренний JS/движок

Теперь:

- он просто inline-block с overflow:hidden
- анимации больше нет вообще

То есть: тег визуально есть, но логики больше нет.

Скорее всего это связано с обновлениями Chromium (примерно 2025–2026), где:

- активно чистят legacy features
- переводят старые элементы в compatibility mode / fallback

Если нужна бегущая строка, то это можно реализовать с помощью CSS, HTML и JS.

Один из близких вариантов на CSS, пример:

HTML

Код:
<div class="marquee">
  <span>Бегущий текст</span>
</div>

CSS:

Код:
<style>
.marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.marquee span {
  animation-duration: 10s; /* как scrollamount */
}
</style>

P.S. Происхождение тега <marquee>: https://thehistoryoftheweb.com/blink-marquis-tag/ 30 лет тегу, который никогда не был в спецификации HTML))

+4

2

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7648
  • Уважение: +6216
  • Позитив: +6726
  • Пол: Мужской
  • Последний визит:
    Чт, 26 Мар 2026 11:10:30

Вариант на JS, движение справа на лево с остановкой при наведении:

Код:
<!-- Бегущая строка -->
<style>
.marquee {
  display: grid;
  align-items: center;
  width: 100%;
  height: 30px;
  background: #CC9933;
  overflow: hidden;
  position: relative;
  font-size: 18px;
}

.marquee__track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
}

.marquee__item {
  padding: 0 20px;
  white-space: nowrap;
  visibility: hidden;
}
</style>

<div class="marquee" data-speed="40" data-direction="left">
  <div class="marquee__track">

    <div class="marquee__item">
      <span>Нужный текст!</span>
    </div>

  </div>
</div>

<!-- Бегущая строка. JS (анимация как marquee) -->
<script>
$(function(){

  $('.marquee').each(function(){

    var $wrap = $(this);
    var $item = $wrap.find('.marquee__item');

    var speed = parseFloat($wrap.data('speed')) || 40; // px/sec
    var dir = $wrap.data('direction') || 'left';

    var paused = false;
    var pos = 0;
    var last = 0;

    // Ждём полной отрисовки, чтобы размеры были корректны
    requestAnimationFrame(function(){
      requestAnimationFrame(init);
    });

    function init(){

      var wrapW = $wrap.outerWidth();
      var itemW = $item.outerWidth(true);

      // стартовая позиция за пределами экрана
      pos = (dir === 'left') ? wrapW : -itemW;

      // показываем элемент уже на правильной позиции
      $item.css({
        visibility: 'visible',
        transform: 'translateX(' + pos + 'px)'
      });

      last = performance.now();

      function step(now){

        if (!paused){

          var dt = (now - last) / 1000;
          last = now;

          var move = speed * dt;

          if (dir === 'left') pos -= move;
          else pos += move;

          // полный выход за границу
          if (dir === 'left' && pos <= -itemW){
            pos = wrapW;
          }

          if (dir === 'right' && pos >= wrapW){
            pos = -itemW;
          }

          $item.css('transform', 'translateX(' + pos + 'px)');
        }

        requestAnimationFrame(step);
      }

      requestAnimationFrame(step);
    }

    // hover pause
    $wrap.on('mouseenter', function(){ 
      paused = true; 
    });

    $wrap.on('mouseleave', function(){ 
      paused = false;
      last = performance.now(); // фикс скачка
    });

    // API
    this.start = function(){ 
      paused = false; 
      last = performance.now();
    };

    this.stop = function(){ 
      paused = true; 
    };

  });

});
</script>

+4

Страница: 1

Вы здесь » Единый форум поддержки » Справочная » Бегущая строка, тег <marquee> больше браузерами не поддерживается