From 595dafa0e5e8c3e06a85c58b30b8890e4ba51202 Mon Sep 17 00:00:00 2001 From: Allen Lee Date: Thu, 22 Apr 2021 01:10:53 +0800 Subject: [PATCH 1/3] feat: improve rendering performance by `content-visibility` Add the CSS `content-visibility` to fluent-card of web-component. This style will avoid some unnecessary rendering processes when the components are not in the viewport. It will improve the performance of the page, like some feeds flow or multiple cards grid. --- packages/web-components/src/card/card.styles.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/web-components/src/card/card.styles.ts b/packages/web-components/src/card/card.styles.ts index f59791aca66972..294c38da08f15e 100644 --- a/packages/web-components/src/card/card.styles.ts +++ b/packages/web-components/src/card/card.styles.ts @@ -22,6 +22,10 @@ export const CardStyles = css` :host(:focus-within) { --elevation: 8; } + + :host * { + content-visibility: auto; + } `.withBehaviors( neutralFillCardRestBehavior, forcedColorsStylesheetBehavior( From c00d19a8d966e806052e78c80879c39f9cf655bd Mon Sep 17 00:00:00 2001 From: Allen Lee Date: Thu, 22 Apr 2021 13:45:20 +0800 Subject: [PATCH 2/3] chore: fluent-card host style --- packages/web-components/src/card/card.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/src/card/card.styles.ts b/packages/web-components/src/card/card.styles.ts index 294c38da08f15e..6e5749a6c361ba 100644 --- a/packages/web-components/src/card/card.styles.ts +++ b/packages/web-components/src/card/card.styles.ts @@ -23,7 +23,7 @@ export const CardStyles = css` --elevation: 8; } - :host * { + :host { content-visibility: auto; } `.withBehaviors( From 9b6eb8d3d57e9a0de93696df3fb6d2f563a4b606 Mon Sep 17 00:00:00 2001 From: Allen Lee Date: Wed, 28 Apr 2021 18:47:45 +0800 Subject: [PATCH 3/3] Change files --- ...eb-components-31c14b28-dbe7-4ab5-a327-1192cfefa66c.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-web-components-31c14b28-dbe7-4ab5-a327-1192cfefa66c.json diff --git a/change/@fluentui-web-components-31c14b28-dbe7-4ab5-a327-1192cfefa66c.json b/change/@fluentui-web-components-31c14b28-dbe7-4ab5-a327-1192cfefa66c.json new file mode 100644 index 00000000000000..0fac651678d7bf --- /dev/null +++ b/change/@fluentui-web-components-31c14b28-dbe7-4ab5-a327-1192cfefa66c.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "content-visibility", + "packageName": "@fluentui/web-components", + "email": "qinshuoli@microsoft.com", + "dependentChangeType": "patch" +}