Есть тестовый html-код:
<!DOCTYPE html>
<html>
<head></head>
<body>
<input style="border: 1px solid black; border-radius: 30px;">
</body>
</html>
Есть браузер FireFox 129.0, где такой элемент при ширине окна устройства менее 490 пикселей отображается следующим образом:
При увеличении ширины окна >=490 отображение резко улучшается:
При этом если открыть любой сайт (например хабр) и вместо исходного кода вставить вышеприведенный, отображение на любой ширине окна будет корректным, в отличие от первых двух скриншотов:
Из-за чего возникает проблема резкого утолщения границ с border-radius в FireFox (первый скриншот), почему эта проблема становится значительно меньше при увеличении области просмотра >=490px (второй скриншот), и почему при вставке данного кода вместо любой страницы в интернете браузер отображает все корректно (третий скриншот)?
