mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

fix: Revert "feat: Corner Smoothing CSS rule" (#46231)

Browse source 
Revert "feat: Corner Smoothing CSS rule (#45185)"

This reverts commit b75e802280.
This commit is contained in:
Calvin 2025-03-24 13:36:49 -06:00 • committed by GitHub
parent cfd64b5f89
commit abaef13c0b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 1 additions and 1313 deletions
Download patch file Download diff file Expand all files Collapse all files

3
docs/README.md
View file

@ -96,9 +96,8 @@ These individual tutorials expand on topics discussed in the guide above.
* [Chrome Extensions Support](api/extensions.md)
* [Breaking API Changes](breaking-changes.md)
### Custom Web Features:
### Custom DOM Elements:
* [`-electron-corner-smoothing` CSS Rule](api/corner-smoothing-css.md)
* [`<webview>` Tag](api/webview-tag.md)
* [`window.open` Function](api/window-open.md)

78
docs/api/corner-smoothing-css.md
View file

@ -1,78 +0,0 @@
## CSS Rule: `-electron-corner-smoothing`
> Smoothes out the corner rounding of the `border-radius` CSS rule.
The rounded corners of elements with [the `border-radius` CSS rule](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) can be smoothed out using the `-electron-corner-smoothing` CSS rule. This smoothness is very similar to Apple's "continuous" rounded corners in SwiftUI and Figma's "corner smoothing" control on design elements.
![There is a black rectangle on the left using simple rounded corners, and a blue rectangle on the right using smooth rounded corners. In between those rectangles is a magnified view of the same corner from both rectangles overlapping to show the subtle difference in shape.](../images/corner-smoothing-summary.svg)
Integrating with the operating system and its design language is important to many desktop applications. The shape of a rounded corner can be a subtle detail to many users. However, aligning closely to the system's design language that users are familiar with makes the application's design feel familiar too. Beyond matching the design language of macOS, designers may decide to use smoother round corners for many other reasons.
`-electron-corner-smoothing` affects the shape of borders, outlines, and shadows on the target element. Mirroring the behavior of `border-radius`, smoothing will gradually back off if an element's size is too small for the chosen value.
The `-electron-corner-smoothing` CSS rule is **only implemented for Electron** and has no effect in browsers. Avoid using this rule outside of Electron. This CSS rule is considered experimental and may require migration in the future if replaced by a CSS standard.
### Example
The following example shows the effect of corner smoothing at different percents.
```css
.box {
width: 128px;
height: 128px;
background-color: cornflowerblue;
border-radius: 24px;
-electron-corner-smoothing: var(--percent); /* Column header in table below. */
}
```
| 0% | 30% | 60% | 100% |
| --- | --- | --- | --- |
| ![A rectangle with round corners at 0% smoothness](../images/corner-smoothing-example-0.svg) | ![A rectangle with round corners at 30% smoothness](../images/corner-smoothing-example-30.svg) | ![A rectangle with round corners at 60% smoothness](../images/corner-smoothing-example-60.svg) | ![A rectangle with round corners at 100% smoothness](../images/corner-smoothing-example-100.svg) |
### Matching the system UI
Use the `system-ui` keyword to match the smoothness to the OS design language.
```css
.box {
width: 128px;
height: 128px;
background-color: cornflowerblue;
border-radius: 24px;
-electron-corner-smoothing: system-ui; /* Match the system UI design. */
}
```
| OS: | macOS | Windows, Linux |
| --- | --- | --- |
| Value: | `60%` | `0%` |
| Example: | ![A rectangle with round corners whose smoothness matches macOS](../images/corner-smoothing-example-60.svg) | ![A rectangle with round corners whose smoothness matches Windows and Linux](../images/corner-smoothing-example-0.svg) |
### Controlling availibility
This CSS rule can be disabled by setting [the `cornerSmoothingCSS` web preference](./structures/web-preferences.md) to `false`.
```js
const myWindow = new BrowserWindow({
// [...]
webPreferences: {
enableCornerSmoothingCSS: false // Disables the `-electron-corner-smoothing` CSS rule
}
})
```
The CSS rule will still parse, but will have no visual effect.
### Formal reference
* **Initial value**: `0%`
* **Inherited**: No
* **Animatable**: No
* **Computed value**: As specified
```css
-electron-corner-smoothing =
<percentage [0,100]> |
system-ui
```

1
docs/api/structures/web-preferences.md
View file

@ -149,7 +149,6 @@
`WebContents` when the preferred size changes. Default is `false`.
* `transparent` boolean (optional) - Whether to enable background transparency for the guest page. Default is `true`. **Note:** The guest page's text and background colors are derived from the [color scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) of its root element. When transparency is enabled, the text color will still change accordingly but the background will remain transparent.
* `enableDeprecatedPaste` boolean (optional) _Deprecated_ - Whether to enable the `paste` [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand). Default is `false`.
* `enableCornerSmoothingCSS` boolean (optional) _Experimental_ - Whether the [`-electron-corner-smoothing` CSS rule](../corner-smoothing-css.md) is enabled. Default is `true`.
[chrome-content-scripts]: https://developer.chrome.com/extensions/content_scripts#execution-environment
[runtime-enabled-features]: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/platform/runtime_enabled_features.json5

3
docs/images/corner-smoothing-example-0.svg
View file

@ -1,3 +0,0 @@
<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 48C0 21.4903 21.4903 0 48 0H144C170.51 0 192 21.4903 192 48V144C192 170.51 170.51 192 144 192H48C21.4903 192 0 170.51 0 144V48Z" fill="#6495ED"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 265 B

3
docs/images/corner-smoothing-example-100.svg
View file

@ -1,3 +0,0 @@
<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 96C0 50.7452 0 28.1177 14.0589 14.0589C28.1177 0 50.7452 0 96 0C141.255 0 163.882 0 177.941 14.0589C192 28.1177 192 50.7452 192 96C192 141.255 192 163.882 177.941 177.941C163.882 192 141.255 192 96 192C50.7452 192 28.1177 192 14.0589 177.941C0 163.882 0 141.255 0 96Z" fill="#6495ED"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 405 B

3
docs/images/corner-smoothing-example-30.svg
View file

@ -1,3 +0,0 @@
<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 62.4C0 49.0126 0 42.3188 1.32624 36.7946C5.5399 19.2435 19.2435 5.5399 36.7946 1.32624C42.3188 0 49.0126 0 62.4 0H129.6C142.987 0 149.681 0 155.205 1.32624C172.757 5.5399 186.46 19.2435 190.674 36.7946C192 42.3188 192 49.0126 192 62.4V129.6C192 142.987 192 149.681 190.674 155.205C186.46 172.757 172.757 186.46 155.205 190.674C149.681 192 142.987 192 129.6 192H62.4C49.0126 192 42.3188 192 36.7946 190.674C19.2435 186.46 5.5399 172.757 1.32624 155.205C0 149.681 0 142.987 0 129.6V62.4Z" fill="#6495ED"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 623 B

3
docs/images/corner-smoothing-example-60.svg
View file

@ -1,3 +0,0 @@
<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 76.8C0 49.9175 0 36.4762 5.23169 26.2085C9.83361 17.1767 17.1767 9.83361 26.2085 5.23169C36.4762 0 49.9175 0 76.8 0H115.2C142.083 0 155.524 0 165.792 5.23169C174.823 9.83361 182.166 17.1767 186.768 26.2085C192 36.4762 192 49.9175 192 76.8V115.2C192 142.083 192 155.524 186.768 165.792C182.166 174.823 174.823 182.166 165.792 186.768C155.524 192 142.083 192 115.2 192H76.8C49.9175 192 36.4762 192 26.2085 186.768C17.1767 182.166 9.83361 174.823 5.23169 165.792C0 155.524 0 142.083 0 115.2V76.8Z" fill="#6495ED"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 631 B

15
docs/images/corner-smoothing-summary.svg
View file

@ -1,15 +0,0 @@
<svg width="1024" height="512" viewBox="0 0 1024 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1024" height="512" fill="#EEEEEE"/>
<rect x="32" y="128" width="256" height="256" fill="white"/>
<rect x="64" y="160" width="192" height="192" rx="48" stroke="#444444" stroke-width="4"/>
<rect x="320" y="64" width="384" height="384" fill="white"/>
<mask id="mask0_1_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="320" y="64" width="384" height="384">
<rect x="320" y="64" width="384" height="384" fill="white"/>
</mask>
<g mask="url(#mask0_1_2)">
<rect x="85" y="171" width="512" height="512" rx="128" stroke="#444444" stroke-width="8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M340.677 167H341.323C401.39 167 446.862 167 481.984 171.722C517.284 176.468 542.726 186.05 562.338 205.662C581.95 225.274 591.532 250.716 596.278 286.016C601 321.138 601 366.61 601 426.677V427.323C601 487.39 601 532.862 596.278 567.984C591.532 603.284 581.95 628.726 562.338 648.338C542.726 667.95 517.284 677.532 481.984 682.278C446.862 687 401.39 687 341.323 687H340.677C280.61 687 235.138 687 200.016 682.278C164.716 677.532 139.274 667.95 119.662 648.338C100.05 628.726 90.4679 603.284 85.722 567.984C81 532.862 81 487.39 81 427.323V426.677C81 366.61 81 321.138 85.722 286.016C90.4679 250.716 100.05 225.274 119.662 205.662C139.274 186.05 164.716 176.468 200.016 171.722C235.138 167 280.61 167 340.677 167ZM201.082 179.651C166.67 184.277 143.197 193.441 125.319 211.319C107.441 229.197 98.2773 252.67 93.6506 287.082C89.0085 321.61 89 366.547 89 427C89 487.453 89.0085 532.39 93.6506 566.918C98.2773 601.33 107.441 624.803 125.319 642.681C143.197 660.559 166.67 669.723 201.082 674.349C235.61 678.992 280.547 679 341 679C401.453 679 446.39 678.992 480.918 674.349C515.33 669.723 538.803 660.559 556.681 642.681C574.559 624.803 583.723 601.33 588.349 566.918C592.992 532.39 593 487.453 593 427C593 366.547 592.992 321.61 588.349 287.082C583.723 252.67 574.559 229.197 556.681 211.319C538.803 193.441 515.33 184.277 480.918 179.651C446.39 175.008 401.453 175 341 175C280.547 175 235.61 175.008 201.082 179.651Z" fill="#2A90D9"/>
</g>
<rect x="731" y="128" width="256" height="256" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M863.839 158H864.161C886.652 158 903.732 158 916.936 159.775C930.228 161.562 939.892 165.182 947.355 172.645C954.818 180.108 958.438 189.772 960.225 203.064C962 216.268 962 233.348 962 255.839V256.161C962 278.652 962 295.732 960.225 308.936C958.438 322.228 954.818 331.892 947.355 339.355C939.892 346.818 930.228 350.438 916.936 352.225C903.732 354 886.652 354 864.161 354H863.839C841.348 354 824.268 354 811.064 352.225C797.772 350.438 788.108 346.818 780.645 339.355C773.182 331.892 769.562 322.228 767.775 308.936C766 295.732 766 278.652 766 256.161V255.839C766 233.348 766 216.268 767.775 203.064C769.562 189.772 773.182 180.108 780.645 172.645C788.108 165.182 797.772 161.562 811.064 159.775C824.268 158 841.348 158 863.839 158ZM811.597 163.74C798.748 165.467 790.069 168.877 783.473 175.473C776.877 182.069 773.467 190.748 771.74 203.597C770.004 216.504 770 233.316 770 256C770 278.684 770.004 295.496 771.74 308.403C773.467 321.252 776.877 329.931 783.473 336.527C790.069 343.123 798.748 346.533 811.597 348.26C824.504 349.996 841.316 350 864 350C886.684 350 903.496 349.996 916.403 348.26C929.252 346.533 937.931 343.123 944.527 336.527C951.123 329.931 954.533 321.252 956.26 308.403C957.996 295.496 958 278.684 958 256C958 233.316 957.996 216.504 956.26 203.597C954.533 190.748 951.123 182.069 944.527 175.473C937.931 168.877 929.252 165.467 916.403 163.74C903.496 162.004 886.684 162 864 162C841.316 162 824.504 162.004 811.597 163.74Z" fill="#2A90D9"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 3.6 KiB