[sf][table]:Table header font is not correct in safari

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.

https://sap.github.io/ui5-webcomponents/

Apache License 2.0

1.46k stars 253 forks source link

[sf][table]:Table header font is not correct in safari #9273

Open QiuranHu opened 1 week ago

QiuranHu commented 1 week ago

Bug Description

Screenshot 2024-06-20 at 17 11 39 Table header font is not correct in safari

Affected Component

Table

Expected Behaviour

No response

Isolated Example

No response

Steps to Reproduce

1. 2. 3. ...

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

Latest

Browser

Safari

Operating System

No response

Additional Context

No response

Organization

SAP SuccessFactors

Declaration

[X] I’m not disclosing any internal or sensitive information.

ilhan007 commented 1 week ago

Hello @aborjinik @DonkeyCo this is for the Table v2, could you have a look? Thank you!

DonkeyCo commented 1 week ago

Hi @ilhan007,

the table in question is the V1 Table see https://sap.github.io/ui5-webcomponents/components/Table/

Seems like there is a styling issue with the font-weight:

The table headers have the following font-weight in Safari: var(--ui5-v1-24-5_table_header_row_font_weight), which resolves to bold. When changing the font-weight to normal, the headers look correct.

Could you guys have a look here? Thanks!

ilhan007 commented 3 days ago

Hi @QiuranHu can give us more details about the environment

which MacOS and Safari do you use,

as on my MacOS Sonoma 14.5 and Safari 17.5, the column header texts are displayed fine:

QiuranHu commented 3 days ago

@ilhan007 Can you please add a screenshot of both safari and chrome display the same table side by side? I think we should have same visual effect in both safari and chrome because we should support both browsers. My mac os version is 14.5 and safari version is 17.5.

ilhan007 commented 3 days ago

Oh I see it now, sorry for the confusion, and @DonkeyCo also mentioned it above, on Safari the texts are bold.

On your screenshot the texts looked so blur and I thought this must be the issue, and it was definitely not the case when I checked the sample on Safari, but still there is a difference, they have to look like as on Chrome:

On Safari we get this currently:

QiuranHu commented 3 days ago

@ilhan007 Thank you for looking into this. I agree we have to make the table header looks the same on chrome and safari.