UI Flickering on Mobile Devices

brunocascio commented 1 year ago

Astro Info

✅ I am using the latest version of Astro and all plugins.
✅ I am using a version of Node that Astro supports (>=18.14.1)

If this issue only occurs in one browser, which browser is a problem?

Chrome, Safari, Firefox

Describe the Bug

When using mobile devices, everytime a the query param changes the UI flickers. With the last PR (https://github.com/withastro/astro/pull/8772) on desktop has improved A LOT, but sill flickers on mobile browsers and a little bit on mobile simulators.

Here's an example on my mobile device (which is not so good how it works)

https://github.com/withastro/astro/assets/2397875/e4d22494-6aae-4921-ac32-7c90299c7e6e

Here's an example on my desktop (first using the browser device simulator, and then just the browser) Here it works such better but still with some rendering issues.

https://github.com/withastro/astro/assets/2397875/8d791236-fa0f-47dd-b88f-63ba54d586d5

Let me know if I can help with any other kind of test.

My layout code:

---
import '../global.css'
import { ViewTransitions } from "astro:transitions";
import SearchInput from "../components/inputs/search.astro"
import '@fontsource-variable/urbanist';
const { title } = Astro.props;
---
<!DOCTYPE html>
  <html lang="es" class="overflow-x-hidden overscroll-y-none">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
    <ViewTransitions />
  </head>
  <body class="bg-lightest">
    <header>
      <slot name="navbar" />
    </header>
    <main class='px-6 py-2'>
      <slot />
    </main>
  </body>
</html>

My page:

---
import MainLayout from "@/layout/main-layout.astro"
import OrgNavbar from "@/components/navbars/organization.astro"
import { prisma } from '@/lib/prisma'
import Slider from "@/components/slider.astro"
import ServiceCard from "@/components/service-card.astro"

type QueryParams = {
  catId?: string
}

const { orgSlug } = Astro.params;

const q = Object.fromEntries(Astro.url.searchParams.entries()) as QueryParams

const org = await prisma.organization.findUnique({
  where: {
    slug: orgSlug as string
  }
})

if (!org) {
  return Astro.redirect("/404");
}

const categories = await prisma.serviceCategory.findMany({
  where: {
    services: {
      every: {
        orgId: org?.id
      }
    }
  }
})

const services = await prisma.service.findMany({
  where: {
    orgId: org.id,
    ...(q.catId ? {
      categories: {
        every: {
          id: q.catId
        },
      }
    } : {})
  }
})
---
<MainLayout title={org.name}>
  <OrgNavbar slot="navbar" org={org} />
  <section class="py-4">
    <Slider items={[{ name: 'Todo', id: '' }].concat(categories)} keyName="catId" transition:persist/>
  </section>
  <section class="grid gap-4 py-2">
    {services.map(service => (
      <ServiceCard org={org} service={service} />
    ))}
  </section>
</MainLayout>

What's the expected result?

It should not flicker as the normal desktop view behavior.

Link to Minimal Reproducible Example

https://stackblitz.com/github/brunocascio/buki

Participation

[ ] I am willing to submit a pull request for this issue.

brunocascio commented 1 year ago

NOTE 1: This is happending in previous versions as well NOTE 2: Ffound it only happens with custom fonts

florian-lefebvre commented 1 year ago

Could https://github.com/danielroe/fontaine help? Either on user or framework side

brunocascio commented 1 year ago

Hi @florian-lefebvre thank you so much for your help. It works!

It only works with the production build, not in development. Probably I'd need to tweak the plugin config to get it working on local, but at least it works in production.

Thanks again!

florian-lefebvre commented 1 year ago

Cool! If you find a way to fix it in dev as well, can you keep me updated there?

withastro / astro