здесь мы используем «container-type: size», чтобы привязать отступы и размер шрифта к размеру контейнера, но это свойство «container-type» не поддерживается в версиях браузеров старше 2022 года, из-за чего во многих в браузерах и мобильных телефонах (включая iPhone X) пользовательский интерфейс компонентов полностью не работает.
как обойти эту проблему, я не хочу полностью переписывать, так как это свойство «тип-контейнера» используется по всему мой продукт в разных местах, и переписать его невозможно
return (
{aboutData.map((tab, index) => (
setActiveTab(tab.id)}
className={`group relative flex h-full items-center justify-center rounded-full text-[3.3cqw] transition ${
activeTab === tab.id ? "text-white" : "text-[#aaa]"
} w-full`}
style={{ WebkitTapHighlightColor: "transparent" }}>
{aboutData.length > 1 && activeTab === tab.id && (
)}
{published ? (
{tab.label}
) : (
handleLabelChange(e, tab.id)}
className="relative z-10 border-none bg-transparent text-center text-white outline-none [font-size:inherit]"
style={{ width: "100%" }}
/>
)}
{index !== 0 && !published && deleteTab(tab.id)} />}
))}
{aboutData.length < 3 && !published && }
{renderContent(aboutData)}
);
Подробнее здесь: https://stackoverflow.com/questions/793 ... r-browsers
