Нужно очень (очень) много добавить box-shadow либо сотней слоёв, либо с огромными значениями (0 0 99999px 99999px), чтобы что-то глючило при таком количестве элементов.
P. S. Все сайты проверяю на iPhone X, iPhone 6, Meizu 16S и на старом телефоне с 1 Гб ОЗУ, Snapdragon 410 и Android 4.4. Нужно очень постараться, чтобы box-shadow в типичных сценариях сильно нагрузил страницу.
Такое, как у автора, не будет глючить даже на старых устройствах. Для примера откройте на каком-нибудь телефоне слабом: https://jsfiddle.net/s29juc45/show
Не очень много лагов, правда? А ведь тут 350 элементов с box-shadow: 0 0 10px 10px rgba(0, 0, 0, .2) — и размытие, и наложение rgba.
Xdevelx, так и я о том же и писал. Прогрессивное улучшение — для IE на старой спецификации, для других браузеров — в нормальной. Ну или же в любой иной комбинации технологий.
Xdevelx, про это всё я знаю, лучше приведите пример, если есть, нормального рабочего grid в IE10. Я сколько не пытался, ничего нормального из этого не выходило. То ширина элементов будет косая, то они друг на друга, то у элементов контент будет выпадать за границы, то ширины не будет. И таких багов — тьма.
Жук, обычно то, что вы хотите делается с помощью того же React и контроля состояния, разрешения. И будет у вас полный контроль над рендерингом вашего компонента. Либо делайте надстройки-костыли с помощью CSS и медиазапросов.
raury, дополню, что SVG-картинке нужно, как и в примере, обязательно добавить атрибут preserveAspectRatio="none", иначе она будет соотношение сторон держать, а это тут не нужно.
Изначально просто данный атрибут с этим значением не проставляется.
Если прямо все фото одинаковые по соотношению сторон, размеру книги, по её позиции, можете пытаться изгаляться с scale или с опциями object-fit. Всё это костыль, который не будет брать во внимание множество факторов.
На работе у меня сейчас все машины обновляют до Ryzen 3900X. Для рендеринга и программирования.