Macbook Safari affiche le texte masqué/débordant empilé

Question

J'utilise Amplify UI dans la bibliothèque React et je crée une carte qui affiche l'utilisateur et certaines de ses informations. Cependant, s’ils ont trop d’informations, le débordement est coupé et peut être vu sur une autre page. Tout semble bien, sauf pour les Macbooks de certains utilisateurs. Je suis confus car je n'ai pas eu ce problème même avec mon Iphone.

La carte utilisateur devrait ressembler à ceci :

Mais sur les MacBook de certaines personnes, cela finit par ressembler à ceci :

Veuillez ignorer la marque rouge des informations personnelles.

Voici comment j'appelle Amplify sur le composant généré à partir du code Figma :

Bio: {
                    overflow: "fade",
                    style: {
                      WebkitOverflowScrolling: "touch", // for webit browsers to prevent stacked letters
                      whiteSpace: "nowrap",
                    },
                    maxHeight: "80px",
                    fontSize: { base: ".875rem", medium: ".875rem" },
                  },
                  Subjects: {
                    alignItems: "flex-start",
                    overflow: "clip",
                    style: {
                      WebkitOverflowScrolling: "touch", // for webit browsers to prevent stacked letters
                      whiteSpace: "nowrap",
                    },
                    maxHeight: "60px",
                    wrap: "wrap",
                    gap: "xs",
                    alignContent: "flex-start",
                  },

Voici l'extrait de code du composant généré par Amplify :

<Flex
          gap="4px"
          direction="row"
          width="unset"
          height="unset"
          justifyContent="flex-start"
          alignItems="center"
          shrink="0"
          position="relative"
          padding="0px 0px 0px 0px"
          children={subjects}
          {...getOverrideProps(overrides, "Subjects")}
        ></Flex>
...
<Text
          fontFamily="Inter"
          fontSize="16px"
          fontWeight="400"
          color="rgba(48,64,80,1)"
          lineHeight="24px"
          textAlign="left"
          display="block"
          direction="column"
          justifyContent="unset"
          width="unset"
          height="unset"
          gap="unset"
          alignItems="unset"
          shrink="0"
          alignSelf="stretch"
          position="relative"
          padding="0px 0px 0px 0px"
          whiteSpace="pre-wrap"
          isTruncated={true}
          children={tutor?.bio}
          {...getOverrideProps(overrides, "Bio")}
        ></Text>

Puis-je ajouter autre chose à ces conteneurs pour que MacBook Safari affiche désormais des informations empilées ?

Answer 1

Cela est probablement dû au fait que overflow: Clip la version 15 ou inférieure de la version de bureau de Safari n'est pas prise en charge Les utilisateurs qui n'ont pas récemment mis à jour le système d'exploitation de base Mac OSX utiliseront ces versions (sur Mac, la version Safari est liée à. la version du système d'exploitation).

clip 的行为与 hidden Similaire. Cela peut s'afficher correctement ou non, mais essayez de le modifier :

Subjects: {
                    alignItems: "flex-start",
                    overflow: "clip",
                    style: {
                      WebkitOverflowScrolling: "touch", // for webit browsers to prevent stacked letters
                      whiteSpace: "nowrap",
                    },
                    maxHeight: "60px",
                    wrap: "wrap",
                    gap: "xs",
                    alignContent: "flex-start",
                  },

À :

Subjects: {
                    alignItems: "flex-start",
                    overflow: "hidden",
                    style: {
                      WebkitOverflowScrolling: "touch", // for webit browsers to prevent stacked letters
                      whiteSpace: "nowrap",
                    },
                    maxHeight: "60px",
                    wrap: "wrap",
                    gap: "xs",
                    alignContent: "flex-start",
                  },