keycloak / keycloak

Open Source Identity and Access Management For Modern Applications and Services
https://www.keycloak.org
Apache License 2.0
20.92k stars 6.43k forks source link

Default theme logs font related console errors on firefox #29486

Open corneliusroemer opened 1 month ago

corneliusroemer commented 1 month ago

Before reporting an issue

Area

login/ui

Describe the bug

On Firefox only, I get a lot of console errors related to the Open Sans font for the default theme's login page and probably all other pages (or at least all pages that use patternfly).

This is one console error, there's quite a lot of them, a bit unpleasant.

downloadable font: kern: Too large subtable (font-family: "Open Sans" style:normal weight:400 stretch:100 src index:3) source: https://authentication-main.loculus.org/resources/gfdpy/login/loculus/resources-common/node_modules/patternfly/dist/fonts/OpenSans-Regular-webfont.woff2
Firefox 2024-05-13 17 32 14

Version

24.0.4

Regression

Expected behavior

No console errors

Actual behavior

Console errors

How to Reproduce?

  1. Run
    docker run -e KEYCLOAK_ADMIN_PASSWORD=admin -e KEYCLOAK_ADMIN=admin -p 8080:8080 quay.io/keycloak/keycloak start-dev
  2. Open dev tools on firefox
  3. Load localhost:8080
  4. Observe

Anything else?

See: https://stackoverflow.com/questions/35206815/font-loading-error-downloadable-font-kern-too-large-subtable-table-discarded

First reported at keycloakify/keycloakify#548

This has been an issue for however long patternfly has been used.

jonkoops commented 1 month ago

This is likely fixed in the login v2 theme, could you enable that and let us know if the issue persists there?

garronej commented 1 month ago

Hello @jonkoops,

Could you clarify if activating Login v2 affects the FreeMarker data_model?

From what I gather, Login v2 involves updates to the FreeMarker templates and resources, without modifying the data model provided by Keycloak to the FreeMarker context. Is my understanding correct?

Is the plan to eventually merge the pages of resources/theme/keycloak.v2/login into resources/theme/keycloak/login?

Thanks for your insight. I'm trying to anticipate the changes for keeping Keycloakify up to date.

corneliusroemer commented 1 month ago

Thanks @jonkoops - when I switched away from the base themes (not necessarily called v2, at least in case of login, it's just called keycloak), the console errors no longer appear.

These were the themes I switched to (the only ones available apart from base):

Firefox 2024-05-14 00 08 18

Maybe that also answers @garronej's question: it seems like keycloak/login is v2, whereas base (the default) is v1?

jonkoops commented 1 month ago

The V2 theme is a separate theme, that can only be activated by passing a flag during startup from Keycloak (e.g. --features=login2), the theme should show up as keycloak.v2. The keycloak (no V2) theme is just the regular Keycloak theme, and should be the default.

The base theme is intended as a base for themes that want to extend Keycloak, but don't want to bring in a bunch of Keycloak-specific styles, and is not meant to be used directly as a theme. In reality the line between base and keycloak themes has blurred a lot in recent years, and we will likely merge them at some point.

garronej commented 1 month ago

Maybe that also answers @garronej's question: it seems like keycloak/login is v2, whereas base (the default) is v1?

The question I was asking is more technical. I wanted to know if when strarting Keycloak with the --features=login2 a different FreeMarker context is used to render the templates.

jonkoops commented 1 month ago

I wanted to know if when strarting Keycloak with the --features=login2 a different FreeMarker context is used to render the templates.

The environment for the templates should be exactly the same, the class backing it has not changed. The main purpose of the V2 theme is to get rid of old PatternFly versions as the V1 theme includes both PatternFly 3 and 4. The new theme will be using PatternFly 5, which also has different class names and DOM structure, so both CSS and HTML need to be revisited.

garronej commented 1 month ago

@jonkoops Thank you very much for claryfing this for me!

jonkoops commented 1 month ago

I'll mark this as a low impact bug, if anyone wants to go ahead and fix it be my guest, if it's not important enough this should be resolved once we roll out the new theme version.

keycloak-github-bot[bot] commented 1 month ago

Due to the amount of issues reported by the community we are not able to prioritise resolving this issue at the moment.

If you are affected by this issue, upvote it by adding a :thumbsup: to the description. We would also welcome a contribution to fix the issue.

keycloak-github-bot[bot] commented 1 month ago

Due to the amount of issues reported by the community we are not able to prioritise resolving this issue at the moment.

If you are affected by this issue, upvote it by adding a :thumbsup: to the description. We would also welcome a contribution to fix the issue.