Верхняя и нижняя грани — волны SVG (можно на :before и :after), по середине — цветной фон. Можно сразу SVG-картинкой на absolute. Только нужно не забыть в SVG добавить атрибут preserveAspectRatio="none".
Можно, только ожидайте забавные истории с отображением при масштабе 100% (не браузера, а системы по отношению к разрешению экрана).
Если не принимать во внимание баги рендеринга браузеров, то, в принципе, вы сможете увидеть ваши 0.1px, если щипком увеличите в 10 раз нужную область в том же Chrome. Всё при тех же 100% масштаба ОС.
Вообще, дробные пиксели используются достаточно часто, например, чтобы совместить border'ы у слипшихся элементов, чтобы на их границе рамка не была толще в два раза:
Safari уже давно на WebKit и поддерживает Grid с версии 11.1 на MacOS и с версии 10.3 на iOS.
Автору Zhanna_K же я могу посоветовать только учиться верстать и показать неработающий код, т. к. подобных проблем в Safari в целом нет. Но есть более дурацкие проблемы, связанные с механизмом прокрутки, рендерингом шрифтов, рендерингом трансформаций, псевдоэлементов с трансформациями и т. п. Поэтому нам было бы желательно увидеть пример кода.
Василий Сергеевич, смотря в чём. Но не настолько, чтобы не понимать несоответствие посыла вопроса и его текстового воплощения. Вёрстка и программная составляющая реализации корзины на сайте (backend, CMS, БД, frontend и т. д.) никоим образом не связаны. Вёрстка это не более чем разметка и её стилизация. Как это поможет вам создать работающую корзину — не очень понятно.
Вы не указали, ни какую CMS используете, ни, возможно, просто backend-фреймворк. Да и в любом случае, вёрстка с этим не связана. Вы любую вёрстку можете приспособить под ваш backend и frontend. Касательно того же JS — он должен выполнять конкретные действия для конкретного backend'а.
