Skip to content

Drop CSS vendor prefixes and compat workarounds now obsolete in modern browsers #4421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Keavon merged 1 commit into from
Aug 8, 2026
Merged

Drop CSS vendor prefixes and compat workarounds now obsolete in modern browsers #4421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"private": true,
"description": "Graphite's web app frontend.",
"author": "Graphite Authors <contact@graphite.art>",
"browserslist": "> 1.5%, last 2 versions, not dead, not ie 11, not op_mini all, not ios_saf < 13",
"type": "module",
"scripts": {
"check": "svelte-check --fail-on-warnings && eslint",
Expand Down
28 changes: 0 additions & 28 deletions frontend/src/components/panels/Document.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,12 +109,10 @@
let totalSeparators = 0;
let totalToolRowsFor1Columns = 0;
let totalToolRowsFor2Columns = 0;
let totalToolRowsFor3Columns = 0;

const tally = () => {
totalToolRowsFor1Columns += toolsInCurrentGroup;
totalToolRowsFor2Columns += Math.ceil(toolsInCurrentGroup / 2);
totalToolRowsFor3Columns += Math.ceil(toolsInCurrentGroup / 3);
toolsInCurrentGroup = 0;
};

Expand All @@ -133,7 +131,6 @@
totalSeparators,
totalToolRowsFor1Columns,
totalToolRowsFor2Columns,
totalToolRowsFor3Columns,
};
})($document.toolShelfLayout[0]);

Expand Down Expand Up @@ -600,7 +597,6 @@
"--total-separators": toolShelfTotalToolsAndSeparators.totalSeparators,
"--total-tool-rows-for-1-columns": toolShelfTotalToolsAndSeparators.totalToolRowsFor1Columns,
"--total-tool-rows-for-2-columns": toolShelfTotalToolsAndSeparators.totalToolRowsFor2Columns,
"--total-tool-rows-for-3-columns": toolShelfTotalToolsAndSeparators.totalToolRowsFor3Columns,
}}
>
<LayoutCol class="tool-shelf">
Expand Down Expand Up @@ -810,37 +806,13 @@
.tools {
flex: 0 1 auto;

// Disabled because Firefox appears to have switched to using overlay scrollbars which float atop the content and don't affect the layout (as of FF 135 on Windows).
// We'll keep this here in case it's needed in the future.
//
// Firefox-specific workaround for this bug causing the scrollbar to cover up the toolbar instead of widening to accommodate the scrollbar:
// <https://bugzilla.mozilla.org/show_bug.cgi?id=764076>
// <https://stackoverflow.com/questions/63278303/firefox-does-not-take-vertical-scrollbar-width-into-account-when-calculating-par>
// Remove this when the Firefox bug is fixed.
// @-moz-document url-prefix() {
// --available-height-plus-1: calc(var(--available-height) + 1px);
// --3-col-required-height: calc(var(--total-tool-rows-for-3-columns) * calc(var(--tool-width) * 1px) + var(--total-separators) * var(--height-of-separator));
// --overflows-with-3-columns: calc(1px - clamp(0px, calc((var(--available-height-plus-1) - Min(var(--available-height-plus-1), var(--3-col-required-height))) * 1000000), 1px));
// --firefox-scrollbar-width-space-occupied: 2; // Might change someday, or on different platforms, but this is the value in FF 120 on Windows
// padding-right: calc(var(--firefox-scrollbar-width-space-occupied) * var(--overflows-with-3-columns));
// }

.widget-span {
flex-wrap: wrap;
width: var(--columns-width);

.icon-button {
margin: 0;

// &[data-tooltip-description^="Coming soon."] {
// opacity: 0.25;
// transition: opacity 0.1s;

// &:hover {
// opacity: 1;
// }
// }

&:not(.emphasized) {
.color-general {
fill: var(--color-data-general);
Expand Down
2 changes: 0 additions & 2 deletions frontend/src/components/widgets/inputs/NumberInput.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -939,7 +939,6 @@
height: 100%;
padding: 0;
margin: 0;
-webkit-appearance: none; // Required until Safari 15.4 (Graphite supports 15.0+)
Comment thread
Keavon marked this conversation as resolved.
appearance: none;
background: none;
cursor: default;
Expand All @@ -964,7 +963,6 @@

// Chromium and Safari
&::-webkit-slider-thumb {
-webkit-appearance: none; // Required until Safari 15.4 (Graphite supports 15.0+)
appearance: none;
border-radius: 2px;
width: 4px;
Expand Down
2 changes: 0 additions & 2 deletions website/sass/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -457,7 +457,6 @@ p {
margin: 0;
text-align: justify;
text-justify: inter-character; // Only supported in Firefox
-webkit-hyphens: auto;
hyphens: auto;

code {
Expand Down Expand Up @@ -566,7 +565,6 @@ code {
background: var(--color-fog);
padding: 0 4px;
overflow-wrap: anywhere;
-webkit-hyphens: none;
hyphens: none;

a & {
Expand Down
6 changes: 0 additions & 6 deletions website/sass/component/carousel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,26 +46,20 @@
top: 0;
z-index: -1;
// Torn edge mask
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;

&.left {
padding-left: 160px;
margin-left: -160px;
-webkit-mask-image: url("https://static.graphite.art/textures/torn-edge-left__2.png");
mask-image: url("https://static.graphite.art/textures/torn-edge-left__2.png");
-webkit-mask-position: top left;
mask-position: top left;
}

&.right {
padding-right: 160px;
margin-right: -160px;
-webkit-mask-image: url("https://static.graphite.art/textures/torn-edge-right__2.png");
mask-image: url("https://static.graphite.art/textures/torn-edge-right__2.png");
-webkit-mask-position: top right;
mask-position: top right;
}
}
Expand Down
1 change: 0 additions & 1 deletion website/sass/page/blog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,6 @@
gap: 20px;
text-align: justify;
text-justify: inter-character; // Only supported in Firefox
-webkit-hyphens: auto;
hyphens: auto;
overflow: hidden;
text-overflow: ellipsis;
Expand Down
1 change: 0 additions & 1 deletion website/sass/page/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -440,7 +440,6 @@
gap: 20px;
text-align: justify;
text-justify: inter-character; // Only supported in Firefox
-webkit-hyphens: auto;
hyphens: auto;
overflow: hidden;
text-overflow: ellipsis;
Expand Down
Loading