Как избежать обрезки HTML переполнения только на IOS ⇐ Html

[Anonymous]

Я создаю компонент React, который использует для отображения текста с градиентной заливкой и обводкой. В iOS (iPhone, iPad, Safari) текст частично обрезается сверху и снизу — почти так же, как обрезается ограничивающая рамка или область обводки. Однако в настольных браузерах (Chrome, Brave, Firefox) и на устройствах Android текст отображается идеально, без обрезки.
Возможно, часть проблемы связана с курсивным шрифтом, но, поскольку как видите, знаки ударения, такие как «~», также обрезаются.
Края и знаки ударения обрезаются
Я работаю в Ubuntu и могу Я не проверяю это напрямую из системы MacIOS, но границы текста в Brave выглядят так:
Текст в Brave
Сайт предназначен для клиента и все еще находится в разработке, но я предоставил его для тестирования в: https:// museclub-teste.rerunsset.com/
Я безуспешно пробовал несколько распространенных исправлений:

• Увеличение viewBox значительные размеры (добавление дополнительных отступов вокруг текста).
• Вставка невидимого для расширения ограничивающей рамки.
• Установка overflow="visible" для элементов и .
• Изменение доминантной базовой линии со «средней» на «центральную», «висячую» или другие базовые линии.
• Удаление или изменение fontStyle="italic" и настройка высоты строки. или Leading-none.

Несмотря на эти попытки, текст по-прежнему обрезается только в iOS Safari. Я ожидал, что текст будет отображаться полностью (без обрезки сверху и по бокам), как это происходит на других платформах. Кто-нибудь знает, как надежно предотвратить обрезание в на устройствах iOS?
Версии:

• React 18
• NextJS 14.2

FeaturedTextSVG.tsx:import React, { ComponentPropsWithoutRef, ReactNode } from "react";
import { cn } from "@/utils/classMerge";

type GradientStop = {
offset: string;
stopColor: string;
};

type GradientData = {
fillID: string;
strokeID: string;
fillStops: GradientStop[];
strokeStops: GradientStop[];
};

type GradientMap = Record;

/**
* Map containing the fill and stroke gradient definitions
* for each theme variant.
*/
const GRADIENT_MAP: GradientMap = {
dark: {
fillID: "fillGradientDark",
strokeID: "strokeGradientDark",
fillStops: [
{ offset: "0%", stopColor: "#DB98A5" },
{ offset: "50%", stopColor: "#C96981" },
{ offset: "100%", stopColor: "#91314A" },
],
strokeStops: [
{ offset: "0%", stopColor: "#472B2D" },
{ offset: "5%", stopColor: "#7C4A4F" },
{ offset: "10%", stopColor: "#965A61" },
{ offset: "15%", stopColor: "#BC707B" },
{ offset: "51%", stopColor: "#EFBFC7" },
{ offset: "61%", stopColor: "#EFC6CA" },
{ offset: "69.5%", stopColor: "#D9959F" },
{ offset: "90%", stopColor: "#948184" },
{ offset: "100%", stopColor: "#615254" },
],
},
};

/**
* Props for FeaturedTextSVG component.
*/
type FeaturedTextSVGProps = {
children: ReactNode; // The text to display
width?: number | string;
height?: number | string;
fontSize?: number | string;
strokeWidth?: number;
className?: string;
textClassName?: string;
textX?: string;
} & Pick;

/**
* Renders text with both fill and stroke gradients via SVG.
* The stroke precisely follows the shape of each letter.
*/
export function FeaturedTextSVG({
children,
width = 500,
height = 100,
strokeWidth = 3,
className,
textAnchor = 'middle',
fontStyle = 'italic',
fontWeight = '800',
textX = "50%"
}: FeaturedTextSVGProps): ReactNode {
// Retrieve gradient definitions from the map
const gradients = GRADIENT_MAP['dark']; // dark is default so far

return (


{/* Fill gradient */}

{gradients.fillStops.map((stop, idx) => (

))}


{/* Stroke gradient */}

{gradients.strokeStops.map((stop, idx) => (

))}



{children}


);
};

Использование:

Seja a mulher
que você nasceu


para ser!




Подробнее здесь: https://stackoverflow.com/questions/793 ... nly-on-ios