Проблемы совместимости типа контейнера со старыми браузерами ⇐ CSS

[Anonymous]

здесь мы используем «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