wevm/frog

Root element `width` and `height` don't match `imageAspectRatio` unless set explicitly

Open

#502 aperta il 15 ott 2024

Vedi su GitHub
 (1 commento) (0 reazioni) (1 assegnatario)TypeScript (97 fork)user submission
Good First IssueP: LowT: Bug

Metriche repository

Star
 (440 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

Describe the bug

This issue is likely related to #463

In this example, the text will overflow the square frame container. While the frame itself displays as square, the content inside it presumably takes up the width and height of a frame with a rectangular aspect ratio even though width and height are set to 100%.

app.frame("/test", async (c) => {
  return c.res({
    image: (
      <div
        style={{
          color: "white",
          display: "flex",
          fontSize: 60,
          width: "100%",
          height: "100%",
        }}
      >
        This is a really long line of text that overflows the square frame image
        because width and height were not set
      </div>
    ),
    imageAspectRatio: "1:1",
    // Uncommenting this fixes the issue
    // imageOptions: {
    //   width: 1200,
    //   height: 1200,
    // },
  });
});

image

Link to Minimal Reproducible Example

No response

Steps To Reproduce

Frog Version

0.17.4

TypeScript Version

No response

Check existing issues

Anything else?

No response

Guida contributor

Direzione di ricerca
Indaga la relazione tra imageAspectRatio e le dimensioni dell'elemento radice del frame. Controlla il codice nel componente frame (probabilmente in src/ o packages/) dove viene applicato imageAspectRatio. L'issue correlato #463 potrebbe fornire indizi. La correzione probabilmente implica l'impostazione di larghezza/altezza predefinite in base alle proporzioni quando le dimensioni esplicite non sono fornite. Esamina come vengono calcolati gli stili di larghezza e altezza del div radice e assicurati che corrispondano alle proporzioni anche quando non sono impostati esplicitamente.
Tech stack
typescript
Dominio
backend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 ore
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
TypeScript
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
70