SeongUkKim opened a new issue, #68312:
URL: https://github.com/apache/airflow/issues/68312

   ### Apache Airflow version
   
   3.1.3
   
   ### What happened
   
   The Airflow 3.1.3 UI renders incorrectly on Microsoft Edge 100. The backend 
appears healthy, but the UI looks partially rendered / unstyled, similar to 
missing or unsupported CSS.
   
   I also added related information to this discussion, where a similar UI 
rendering problem was reported for Airflow 3.1.5:
   
   
https://github.com/apache/airflow/discussions/60441#discussioncomment-17245528
   
   ### How to reproduce
   
   1. Run Airflow 3.1.3 with the webserver / api-server UI enabled.
   2. Open the Airflow UI in Microsoft Edge 100.
   3. Observe that the UI rendering is broken/incomplete even though the 
backend is healthy.
   
   I do not currently have a minimal repository reproduction beyond the 
affected Airflow deployment, but the behavior was reproducible in my 
environment with Edge 100.
   
   ### What I expected to happen
   
   Either:
   
   - the Airflow 3.x UI should render correctly on Edge 100, if Edge <=110 is 
intended to be supported, or
   - the browser requirement should be documented clearly if older 
Chromium-based Edge versions are not supported.
   
   ### Investigation / workaround
   
   I tested a local workaround by patching the generated frontend assets inside 
the Airflow webserver container:
   
   - converted `oklch(...)` colors to older-compatible color values
   - replaced `color-mix(...)` usages with fallback colors
   - removed pre-compressed `.gz` / `.br` frontend assets
   - restarted the webserver container
   
   After that, the UI rendered normally on Edge 100.
   
   The Airflow UI source also appears to use `oklch()` directly in 
`airflow-core/src/airflow/ui/src/theme.ts`. Edge <=110 does not support 
`oklch()` or `color-mix()`, while Edge 111+ does. That makes this look like a 
compatibility issue with newer CSS color syntax in the generated frontend 
bundle.
   
   ### Proposal
   
   Could maintainers clarify whether Airflow 3.x UI is expected to support Edge 
<=110?
   
   If Edge <=110 is supported, I can look into a build-time CSS 
fallback/transformation approach.
   
   If Edge <=110 is not supported, I can help with a small documentation PR 
clarifying the browser requirement for the Airflow 3 UI.
   
   ### Operating System
   
   The affected Airflow deployment was running in a Docker-based environment.
   
   ### Deployment
   
   Other Docker-based deployment
   
   ### Anything else
   
   This is related to the GitHub Discussion at 
https://github.com/apache/airflow/discussions/60441.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]

Reply via email to