next.jsheadermobile-devices

NextJs 14 app string is displayed illegibly on some mobile devices

I created a NextJs 14 app with JavaScript, Tailwind and Framer Motion. Now I am receiving feedback from three users that the texts have display errors. This only applies to the view on a mobile device. I have changed the font and also uninstalled @next/font, as described in the article https://nextjs.org/docs/messages/built-in-next-font. However, the view has not changed for either user. I have attached an image with the incorrect view as proof. False representation correct representation

I have changed the font and also uninstalled @next/font, as described in the article (https://nextjs.org/docs/messages/built-in-next-font). However, the view has not changed for either user.

layout.js

import { Outfit } from "next/font/google";
import "./globals.css";
import MobileNavBar from "@/components/sub/MobileNavBar";
import { ThemeProvider } from "@/components/theme-provider";
import DarkModeToggle from "@/components/sub/DarkModeToggle";
import PageLoader from "@/components/PageLoader";
import { Analytics } from "@vercel/analytics/react";
const outfit = Outfit({
  subsets: ["latin"],
});

export const metadata = {
  title: "...",
  description: "...",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning={true}>
      <body className={outfit.className}>
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem
          disableTransitionOnChange
        >
          <PageLoader>
            <DarkModeToggle />
            <MobileNavBar />
            {children}
            <Analytics />
          </PageLoader>
        </ThemeProvider>
      </body>
    </html>
  );
}

Card.jsx

"use client";

import { motion } from "framer-motion";
import Link from "next/link";
import { FiArrowRight } from "react-icons/fi";

const TagebuchKarte = ({ Reisetagebuch }) => {
  const { Tagebucheintrag } = Reisetagebuch;
  const sortedTagebucheintrag = [...Tagebucheintrag].sort((a, b) => new Date(b.Datum) - new Date(a.Datum));
  
  return (
    <div className="p-4 md:p-8 bg-background">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8 w-full max-w-6xl mx-auto">
        {sortedTagebucheintrag.map((eintrag, index) => (
          <Card
            heading={eintrag.Titel}
            description={eintrag.Text}
            imgSrc={eintrag.ImageUrl}
            uniqueID={eintrag.uniqueID}
            country={Reisetagebuch.Land}
            key={index}
          />
        ))}
      </div>
    </div>
  );
};

const Card = ({ heading, description, imgSrc, uniqueID, country }) => {
  var trimmedString = description.substr(0, 50);

  //re-trim if we are in the middle of a word
  trimmedString = trimmedString.substr(
    0,
    Math.min(trimmedString.length, trimmedString.lastIndexOf(" "))
  );

  return (
    <Link href={`/tagebuch/${uniqueID}`}>
      <motion.div
        transition={{
          // staggerChildren: 0.035,
          staggerChildren: 0.015,
        }}
        whileHover="hover"
        className="w-full h-64 bg-slate-200 overflow-hidden cursor-pointer group relative"
      >
        <div
          className="absolute inset-0 saturate-100 md:saturate-0 md:group-hover:saturate-100 group-hover:scale-110 transition-all duration-500"
          style={{
            backgroundImage: `url(${imgSrc})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        />
        <div className="p-4 relative z-20 h-full text-primary-foreground group-hover:text-white transition-colors duration-500 flex flex-col justify-between">
          <FiArrowRight className="text-3xl group-hover:-rotate-45 transition-transform duration-500 ml-auto" />
          <div>
            <h4>
              {heading.split("").map((l, i) => (
                <ShiftLetter letter={l} key={i} />
              ))}
            </h4>
            <p>{trimmedString}</p>
          </div>
        </div>
      </motion.div>
    </Link>
  );
};

const ShiftLetter = ({ letter }) => {
  return (
    <div className="inline-block overflow-hidden h-[36px] font-semibold text-3xl">
      <motion.span
        className="flex flex-col min-w-[4px]"
        style={{
          y: "0%",
        }}
        variants={{
          hover: {
            y: "-50%",
          },
        }}
        transition={{
          duration: 0.3,
        }}
      >
        <span>{letter}</span>
        <span>{letter}</span>
      </motion.span>
    </div>
  );
};

export default TagebuchKarte;
Solution

  • The error was hidden in the html tag. The website is a page in German language. However, the html tag was maintained with the lang=‘en’ attribute. If the function ‘Translate’ and automatic translation into German was activated, then an attempt was made to translate German into German, which led to the incorrect view. The html tag was changed to ‘de-DE’ and the error disappeared.