Тіні прокручування? Чистий паралакс CSS? Гра знову ввімкнена. PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai.

Тіні прокручування? Чистий паралакс CSS? Гра знову ввімкнена.

Кріс дзвінки прокручування тіней один із його улюблених CSS-трюків усіх часів. Леа Веру популяризовано чистий підхід CSS із використанням чотирьохшарових градієнтів фону з деякими розумними background-attachment магія. Результатом є зручне прокручування, яке дає користувачам натяк на те, що додатковий вміст доступний у прокручуваному контейнері.

Тільки одна проблема: вона зламав у Safari iOS 13. Одного разу все було добре. Наступний, не дуже. І це не єдине, що вплинуло. Паралакс-ефект Кіта Кларка лише для CSS також перестав працювати прямо тоді.

Ну, читачу — написав Рональд знову сказати, що все працює! Фактично, я пишу це на своєму iPad (Safari 15.5) прямо зараз, і демонстрація Кріса виглядає чіткою, як ніколи. Так само й у Кіта оригінальна демонстрація.

Отже, що його зламало? Ми ще не знаємо. Але Примітки до випуску Safari 13 пропонувати підказки:

  • Додано підтримку прискореного прокручування одним пальцем до всіх кадрів і overflow:scroll елементи, що усувають необхідність set-webkit-overflow-scrolling: touch.
  • Змінено поведінку за замовчуванням на iPad для широких веб-сторінок із адаптивними мета-тегами, які потребують горизонтального прокручування. Сторінки масштабуються, щоб запобігти горизонтальній прокрутці, а розмір будь-якого тексту змінюється, щоб зберегти розбірливість.

Коли це було виправлено і що це виправило? Що ж, на стороні тіні прокрутки Safari 15.4 включені деяка робота над background-attachment: local це, можливо, зробило свою справу. З боку паралакса Safari 14.1 доданий підтримка індивідуальних властивостей перетворення… можливо це?

Часова мітка:

Більше від CSS-хитрощі