BUG: Fails to apply HSL colors with a decimal point in the hue.

[Ashwin-Mahadevan]

Bug report

Description / Observed Behavior

When a decimal point is provided

Expected Behavior

How did you expect Satori to behave here?

Reproduction

Note: Satori functions correctly in the OG-Image Playground (Reproduction)

However, in any Next.js app, the bug occurs. I've tried the lastest next-js and satori releases as well as a few versions back. To reproduce this, git clone https://github.com/ashwin-mahadevan/satori-decimal-hue-reproduction, start the Next server, and navigate to / or /?decimal=true.

or use the following code in an app-router route.tsx file:

import { ImageResponse } from "next/og";

export function GET(request) {
  const decimal = request.nextUrl.searchParams.get("decimal") === "true";

  const element = (
    <div
      style={{
        display: "flex",
        width: 256,
        height: 256,
        backgroundColor: decimal
          ? "hsl(20.5 90.2% 48.2%)" // Shows black image with decimal hue.
          : "hsl(21 90.2% 48.2%)", // Shows correct orange image with integer hue.
      }}
    />
  );

  return new ImageResponse(element, { width: 256, height: 256 });
}

[Jackie1210]

It seems rendered correct result by your (Reproduction)

[Ashwin-Mahadevan]

Hi, thanks for taking the time to view this issue!

The problem is that, while it does work in the Vercel OG playground, it does not work in Next.js!
You can see this by cloning the repository I've linked (https://github.com/ashwin-mahadevan/satori-decimal-hue-reproduction).

Is there any difference between @vercel/satori and next/og?

[Ashwin-Mahadevan]

Just checked again to confirm and the linked repository still has the issue.

[Jackie1210]

My guess is that next.js has it own bundle of satori, which might not same with latest satori