Hacker News Digest

Я листал соцсети и наткнулся на toot Энди P с трюком:

width: calc(infinity * 1px); height: calc(infinity * 1px);

Подумал: отличный тест на пределы. Если отдать браузеру бесконечность через ключевое слово infinity, он всё равно зажмет до максимума — можно понять верхнюю планку.

Сделал див с width/height: calc(infinity * 1px), обнулил отступы, проверил в Safari, Chrome и Firefox (Nightly) на macOS — и началось странное.

• Safari: около 33,554,428 px по ширине/высоте
• Chrome: около 33,554,400 px
• Firefox: высота схлопывается до межстрочного (например, 19.2 px при normal, 16 px при line-height: 1), ширина — вычислено ~17,895,700, но в раскладке ~8,947,840 (ровно половина минус 10)

Safari/Chrome почти упираются в 2^25 - 1 (33,554,431), но чуть ниже. Почему именно так — загадка. Firefox же ведет себя особенно: высота с “бесконечностью” игнорируется и падает к строке, ширина делится пополам в layout.

Дальше я попробовал font-size: calc(infinity * 1px):

• Safari: 100,000 px
• Chrome: 10,000 px
• Firefox: вычислено 3.40282e38 (макс для 32-бит float), но в раскладке шрифт ~2,400 px при normal; при line-height: 1 высота блока вдруг раздувается до ~8.9 млн. То же при переносе стилей на body.

Вывод: у Safari/Chrome жесткие десятичные лимиты для font-size (100k и 10k). У Firefox — вычислительно “бесконечность” как float, но реально рендерится ограниченный размер и странная связь с line-height.

Проверил line-height: calc(infinity * 1px):

• Safari: ~33,554,428
• Chrome: ~33,554,400
• Firefox: вычислено ~17,895,700, в раскладке ~8,947,840

Итоговые наблюдения:

• Safari/Chrome для размеров элементов/line-height ограничивают около 2^25 - 1; для font-size — вручную заданные пороги (10k/100k).
• Firefox: несогласованность вычисленного и реального значения; высота может схлопываться к строке, ширины/line-height делятся пополам, сильная зависимость от line-height.

Если кто знает первопричины (история движков, типы хранилищ, квантизация, внутренние лимиты раскладки/скролла/композитинга) — расскажите в комментариях или постом с трекбеком.

• Firefox ограничивает высоту блока 17 895 697 px — это максимум для 32-битного signed-целого в единицах 1/60 px.
• Chrome/Safari держатся чуть выше, около 33 554 431 px, т.к. у WebKit/Blink единица 1/64 px и тот же 32-битный signed.
• «Бесконечные» таблицы/листы реализуются через огромный прокручиваемый div, но приходится рисовать свой скролл или канвас, когда нативный height перестаёт работать.
• CSS-значение infinity (новое 2–3 года) просто приводится к этому максимуму, а не даёт настоящую бесконечность.

303Gen

• Обсуждение посвящено веб-инструменту в стиле TB-303: пользователи хвалят звук, музыкальность и авто-генерацию совместимых полиритмов для баса, лида и дрона, отмечают ностальгию по ReBirth и 90-м.
• Автор сообщает, что проект старый и незавершённый; добавил полифилл для cancelAndHoldAtTime в Firefox и выделил часть таймкипинга в библиотеку beatstepper.
• Многие просят открытый исходный код, локальный запуск, экспорт MIDI/стемов, визуализацию паттернов (пиано-ролл), сохранение/загрузку, MIDI синхронизацию и транспорт, а также продолжение воспроизведения при Regenerate.
• Есть баг-репорты: не работало в Firefox до полифилла, в Chromium после Stop остаётся тихий хвост/эхо, иногда нужно жать Stop несколько раз.
• Пользователи делятся альтернативами и вдохновляющими ссылками: Endless Acid Banger, roland50.studio, музыка Vitling, ивенты Acid August.
• Инструмент вызывает желание вернуться к электронной музыке; звучание напоминает Frank Klepacki/Red Alert 2, Dynamix на C64; просят добавить 909-кит.
• Автор кратко описал генерацию: ноты из выбранной гаммы/октавы, деление паттерна на чанки с вероятностным копированием/обновлением и настройкой повторов; сообщество хочет статью о методе.