diff --git a/.stylelintrc.json b/.stylelintrc.json
index e8a3d870fa..12ca1afe5d 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -4,7 +4,6 @@
     "alpha-value-notation": "percentage",
     "color-function-notation": "modern",
     "hue-degree-notation": "angle",
-    "property-no-vendor-prefix": true,
     "selector-type-no-unknown": [
       true,
       {
diff --git a/front_end/accessibility/axBreadcrumbs.css b/front_end/accessibility/axBreadcrumbs.css
index 9b4e1a6901..12dbaaa29a 100644
--- a/front_end/accessibility/axBreadcrumbs.css
+++ b/front_end/accessibility/axBreadcrumbs.css
@@ -40,10 +40,10 @@
 }
 
 .ax-breadcrumbs .ax-node::before {
-  mask-image: url(Images/chevrons.svg);
-  mask-position: 0 0;
-  mask-size: 30px 10px;
-  mask-repeat: no-repeat;
+  -webkit-mask-image: url(Images/chevrons.svg);
+  -webkit-mask-position: 0 0;
+  -webkit-mask-size: 30px 10px;
+  -webkit-mask-repeat: no-repeat;
   background-color: rgb(48 57 66);
   content: "";
   text-shadow: none;
@@ -59,7 +59,7 @@
 }
 
 .ax-breadcrumbs .ax-node.parent::before {
-  mask-position: -20px 1px;
+  -webkit-mask-position: -20px 1px;
 }
 
 .ax-breadcrumbs .ax-node.no-dom-node {
@@ -67,7 +67,7 @@
 }
 
 .ax-breadcrumbs .ax-node.children-unloaded::before {
-  mask-position: 0 1px;
+  -webkit-mask-position: 0 1px;
   width: 13px;
   opacity: 40%;
 }
diff --git a/front_end/animation/animationTimeline.css b/front_end/animation/animationTimeline.css
index 488813267a..6cfae9419c 100644
--- a/front_end/animation/animationTimeline.css
+++ b/front_end/animation/animationTimeline.css
@@ -242,7 +242,7 @@ rect.animation-timeline-grid-line {
 }
 
 .animation-node-removed {
-  filter: saturate(0);
+  -webkit-filter: saturate(0);
   cursor: not-allowed;
 }
 
@@ -378,11 +378,11 @@ text.animation-timeline-grid-label {
 
 @keyframes newGroupAnim {
   from {
-    clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
+    -webkit-clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
   }
 
   to {
-    clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
+    -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
   }
 }
 
diff --git a/front_end/color_picker/spectrum.css b/front_end/color_picker/spectrum.css
index 63eec1c9cd..a2a50eb4f5 100644
--- a/front_end/color_picker/spectrum.css
+++ b/front_end/color_picker/spectrum.css
@@ -624,7 +624,7 @@ div.palette-preview {
   }
 
   :host-context(.-theme-with-dark-background) .spectrum-switcher {
-    filter: unset;
+    -webkit-filter: unset;
   }
 
   .spectrum-switcher:hover svg,
diff --git a/front_end/data_grid/dataGrid.css b/front_end/data_grid/dataGrid.css
index 0bc27554ff..13d7308d4c 100644
--- a/front_end/data_grid/dataGrid.css
+++ b/front_end/data_grid/dataGrid.css
@@ -192,9 +192,9 @@
 
 .data-grid td.disclosure::before {
   user-select: none;
-  mask-image: url(Images/treeoutlineTriangles.svg);
-  mask-position: 0 0;
-  mask-size: 32px 24px;
+  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+  -webkit-mask-position: 0 0;
+  -webkit-mask-size: 32px 24px;
   float: left;
   width: 8px;
   height: 12px;
@@ -210,7 +210,7 @@
 }
 
 .data-grid tr.expanded td.disclosure::before {
-  mask-position: -16px 0;
+  -webkit-mask-position: -16px 0;
 }
 
 .data-grid table.data tr.revealed.selected {
@@ -233,12 +233,12 @@
 
 .data-grid:focus tr.parent.selected td.disclosure::before {
   background-color: var(--selection-fg-color);
-  mask-position: 0 0;
+  -webkit-mask-position: 0 0;
 }
 
 .data-grid:focus tr.expanded.selected td.disclosure::before {
   background-color: var(--selection-fg-color);
-  mask-position: -16px 0;
+  -webkit-mask-position: -16px 0;
 }
 
 .data-grid tr.inactive {
diff --git a/front_end/elements/elementsTreeOutline.css b/front_end/elements/elementsTreeOutline.css
index c3932a688e..c12c7eb9fd 100644
--- a/front_end/elements/elementsTreeOutline.css
+++ b/front_end/elements/elementsTreeOutline.css
@@ -63,18 +63,18 @@
 .elements-disclosure li.parent::before {
   box-sizing: border-box;
   user-select: none;
-  mask-image: url(Images/treeoutlineTriangles.svg);
-  mask-size: 32px 24px;
-  content: '\A0\A0';
+  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+  -webkit-mask-size: 32px 24px;
+  content: '\00a0\00a0';
   color: transparent;
   text-shadow: none;
   margin-right: -3px;
-  mask-position: 0 0;
+  -webkit-mask-position: 0 0;
   background-color: #727272;
 }
 
 .elements-disclosure li.parent.expanded::before {
-  mask-position: -16px 0;
+  -webkit-mask-position: -16px 0;
 }
 
 .elements-disclosure li.always-parent::before {
@@ -228,7 +228,7 @@ select {
 }
 
 /* DOM update highlight */
-@keyframes dom-update-highlight-animation {
+@-webkit-keyframes dom-update-highlight-animation {
   from {
     background-color: rgb(158 54 153);
     color: white;
@@ -244,7 +244,7 @@ select {
   }
 }
 
-@keyframes dom-update-highlight-animation-dark {
+@-webkit-keyframes dom-update-highlight-animation-dark {
   from {
     background-color: rgb(158 54 153);
     color: white;
@@ -261,12 +261,12 @@ select {
 }
 
 .dom-update-highlight {
-  animation: dom-update-highlight-animation 1.4s 1 cubic-bezier(0, 0, 0.2, 1);
+  -webkit-animation: dom-update-highlight-animation 1.4s 1 cubic-bezier(0, 0, 0.2, 1);
   border-radius: 2px;
 }
 
 :host-context(.-theme-with-dark-background) .dom-update-highlight {
-  animation: dom-update-highlight-animation-dark 1.4s 1 cubic-bezier(0, 0, 0.2, 1);
+  -webkit-animation: dom-update-highlight-animation-dark 1.4s 1 cubic-bezier(0, 0, 0.2, 1);
 }
 
 .elements-disclosure.single-node li {
diff --git a/front_end/elements/metricsSidebarPane.css b/front_end/elements/metricsSidebarPane.css
index 684add0437..0e3b8aaff9 100644
--- a/front_end/elements/metricsSidebarPane.css
+++ b/front_end/elements/metricsSidebarPane.css
@@ -12,8 +12,8 @@
   min-height: var(--metrics-height);
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-justify-content: center;
 }
 
 :host {
diff --git a/front_end/emulation/sensors.css b/front_end/emulation/sensors.css
index 23e937d089..146715aa49 100644
--- a/front_end/emulation/sensors.css
+++ b/front_end/emulation/sensors.css
@@ -84,18 +84,18 @@
 }
 
 .orientation-stage {
-  perspective: 700px;
-  perspective-origin: 50% 50%;
+  -webkit-perspective: 700px;
+  -webkit-perspective-origin: 50% 50%;
   width: 160px;
   height: 150px;
   background: linear-gradient(#e1f5fe 0%, #e1f5fe 64%, #b0ebf3 64%, #def6f9 100%);
-  transition: 0.2s ease opacity, 0.2s ease filter;
+  transition: 0.2s ease opacity, 0.2s ease -webkit-filter;
   overflow: hidden;
   margin-bottom: 10px;
 }
 
 .orientation-stage.disabled {
-  filter: grayscale();
+  -webkit-filter: grayscale();
   opacity: 50%;
   cursor: default !important;
 }
diff --git a/front_end/issues/issuesTree.css b/front_end/issues/issuesTree.css
index 07c355823f..9fde997ac6 100644
--- a/front_end/issues/issuesTree.css
+++ b/front_end/issues/issuesTree.css
@@ -50,7 +50,7 @@
 }
 
 .issues li.parent.expanded::before {
-  mask-position: 0 0;
+  -webkit-mask-position: 0 0;
   transform: rotate(90deg);
 }
 
@@ -191,12 +191,12 @@ p {
 
 .link-list li::before {
   content: none;
-  mask-image: none;
+  -webkit-mask-image: none;
 }
 
 .resolutions-list li::before {
   content: "→";
-  mask-image: none;
+  -webkit-mask-image: none;
   padding-right: 5px;
   position: relative;
   top: -1px;
diff --git a/front_end/network/networkLogView.css b/front_end/network/networkLogView.css
index 576d55ee31..b4cbe4c94b 100644
--- a/front_end/network/networkLogView.css
+++ b/front_end/network/networkLogView.css
@@ -118,7 +118,7 @@
 }
 
 .network-log-grid.data-grid select {
-  appearance: none;
+  -webkit-appearance: none;
   border: none;
   width: 100%;
   color: inherit;
@@ -198,13 +198,13 @@
 }
 
 .network-log-grid tr.highlighted-row {
-  animation: network-row-highlight-fadeout 2s 0s;
+  -webkit-animation: network-row-highlight-fadeout 2s 0s;
 }
 
 /* See comment above why the rules were disabled */
 /* stylelint-enable no-descending-specificity */
 
-@keyframes network-row-highlight-fadeout {
+@-webkit-keyframes network-row-highlight-fadeout {
   from { background-color: rgb(255 255 120 / 100%); }
   to { background-color: rgb(255 255 120 / 0%); }
 }
diff --git a/front_end/network/networkTimingTable.css b/front_end/network/networkTimingTable.css
index f2bc56842b..6eff681818 100644
--- a/front_end/network/networkTimingTable.css
+++ b/front_end/network/networkTimingTable.css
@@ -127,9 +127,9 @@ table.network-timing-table > tr:not(.network-timing-table-header):not(.network-t
 
 .network-fetch-timing-bar-clickable::before {
   user-select: none;
-  mask-image: url(Images/treeoutlineTriangles.svg);
-  mask-position: 0 0;
-  mask-size: 32px 24px;
+  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+  -webkit-mask-position: 0 0;
+  -webkit-mask-size: 32px 24px;
   float: left;
   width: 8px;
   height: 12px;
@@ -145,7 +145,7 @@ table.network-timing-table > tr:not(.network-timing-table-header):not(.network-t
 }
 
 .network-fetch-timing-bar-clickable[aria-checked="true"]::before {
-  mask-position: -16px 0;
+  -webkit-mask-position: -16px 0;
 }
 
 .network-fetch-timing-bar-details-collapsed {
diff --git a/front_end/persistence/workspaceSettingsTab.css b/front_end/persistence/workspaceSettingsTab.css
index db9c720771..e3a47653a6 100644
--- a/front_end/persistence/workspaceSettingsTab.css
+++ b/front_end/persistence/workspaceSettingsTab.css
@@ -26,11 +26,11 @@ header > h1 {
 
 .settings-container {
   width: 100%;
-  column-width: 288px;
+  -webkit-column-width: 288px;
 }
 
 .settings-tab.settings-container {
-  column-width: 308px;
+  -webkit-column-width: 308px;
 }
 
 .settings-tab label {
@@ -102,7 +102,7 @@ p.folder-exclude-pattern > input {
 }
 
 .settings-tab.settings-content.settings-container {
-  column-width: initial;
+  -webkit-column-width: initial;
   overflow: hidden;
   padding-right: 10px;
 }
diff --git a/front_end/profiler/profilesPanel.css b/front_end/profiler/profilesPanel.css
index 15e1af813d..7a651af1fd 100644
--- a/front_end/profiler/profilesPanel.css
+++ b/front_end/profiler/profilesPanel.css
@@ -113,10 +113,10 @@
 }
 
 .highlighted-row {
-  animation: row_highlight 2s 0s;
+  -webkit-animation: row_highlight 2s 0s;
 }
 
-@keyframes row_highlight {
+@-webkit-keyframes row_highlight {
   from { background-color: rgb(255 255 120 / 100%); }
   to { background-color: rgb(255 255 120 / 0%); }
 }
diff --git a/front_end/profiler/profilesSidebarTree.css b/front_end/profiler/profilesSidebarTree.css
index 13647f653c..44500b3206 100644
--- a/front_end/profiler/profilesSidebarTree.css
+++ b/front_end/profiler/profilesSidebarTree.css
@@ -92,7 +92,7 @@ li.wait.selected .spinner::before {
   --spinner-color: white;
 }
 
-@keyframes spinner-animation {
+@-webkit-keyframes spinner-animation {
   from { transform: rotate(0); }
   to { transform: rotate(360deg); }
 }
diff --git a/front_end/resources/serviceWorkersView.css b/front_end/resources/serviceWorkersView.css
index 549f26a54a..86ba8c5dc2 100644
--- a/front_end/resources/serviceWorkersView.css
+++ b/front_end/resources/serviceWorkersView.css
@@ -156,8 +156,8 @@
 
 .service-worker-filter-label::before {
   user-select: none;
-  mask-image: url(Images/treeoutlineTriangles.svg);
-  mask-size: 32px 24px;
+  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+  -webkit-mask-size: 32px 24px;
   content: '';
   color: transparent;
   background-color: rgb(110 110 110);
@@ -168,7 +168,7 @@
 }
 
 .service-worker-filter[aria-checked="true"] .service-worker-filter-label::before {
-  mask-position: -16px 0;
+  -webkit-mask-position: -16px 0;
 }
 
 .service-worker-filter-toolbar {
diff --git a/front_end/screencast/screencastView.css b/front_end/screencast/screencastView.css
index 2f9230c817..0ce5dd3d3e 100644
--- a/front_end/screencast/screencastView.css
+++ b/front_end/screencast/screencastView.css
@@ -86,7 +86,7 @@
 }
 
 .screencast-navigation input {
-  flex: 1;
+  -webkit-flex: 1;
   margin: 2px;
   max-height: 19px;
 }
diff --git a/front_end/security/lockIcon.css b/front_end/security/lockIcon.css
index 2b31d29b17..0e4bfb142a 100644
--- a/front_end/security/lockIcon.css
+++ b/front_end/security/lockIcon.css
@@ -7,19 +7,19 @@
 .security-property {
   height: 16px;
   width: 16px;
-  mask-image: url(Images/securityIcons.svg);
-  mask-size: 80px 32px;
+  -webkit-mask-image: url(Images/securityIcons.svg);
+  -webkit-mask-size: 80px 32px;
   background-color: #888;
 }
 
 .lock-icon-secure {
-  mask-position: 0 0;
+  -webkit-mask-position: 0 0;
   background-color: #0b8043;
 }
 
 .lock-icon-unknown,
 .lock-icon-neutral {
-  mask-position: -16px 0;
+  -webkit-mask-position: -16px 0;
   background-color: #000; /* Black for clarity on lower DPI screens */
 }
 
@@ -31,42 +31,42 @@
 }
 
 .lock-icon-insecure {
-  mask-position: -32px 0;
+  -webkit-mask-position: -32px 0;
   background-color: #5a5a5a;
 }
 
 .lock-icon-insecure-broken {
-  mask-position: -32px 0;
+  -webkit-mask-position: -32px 0;
   background-color: #c63626;
 }
 
 .security-property-secure {
-  mask-position: 0 -16px;
+  -webkit-mask-position: 0 -16px;
   background-color: #0b8043;
 }
 
 .security-property-neutral {
-  mask-position: -16px -16px;
+  -webkit-mask-position: -16px -16px;
   background-color: #c63626;
 }
 
 .security-property-insecure {
-  mask-position: -32px -16px;
+  -webkit-mask-position: -32px -16px;
   background-color: #c63626;
 }
 
 .security-property-insecure-broken {
-  mask-position: -32px -16px;
+  -webkit-mask-position: -32px -16px;
   background-color: #c63626;
 }
 
 .security-property-info {
-  mask-position: -48px -16px;
+  -webkit-mask-position: -48px -16px;
   background-color: rgb(0 0 0 / 50%);
 }
 
 .security-property-unknown {
-  mask-position: -64px -16px;
+  -webkit-mask-position: -64px -16px;
   background-color: rgb(0 0 0 / 50%);
 }
 
diff --git a/front_end/settings/keybindsSettingsTab.css b/front_end/settings/keybindsSettingsTab.css
index 3b72c05f2f..9a970d64e4 100644
--- a/front_end/settings/keybindsSettingsTab.css
+++ b/front_end/settings/keybindsSettingsTab.css
@@ -68,7 +68,7 @@ h1 {
   padding: 3px 0;
   white-space: nowrap;
   text-overflow: ellipsis;
-  user-select: none;
+  -webkit-user-select: none;
   color: #222;
   text-align: start;
   position: relative;
diff --git a/front_end/settings/settingsScreen.css b/front_end/settings/settingsScreen.css
index f6cc0c7766..846d62e4d7 100644
--- a/front_end/settings/settingsScreen.css
+++ b/front_end/settings/settingsScreen.css
@@ -26,18 +26,18 @@
 
 .settings-container {
   width: 100%;
-  column-width: 288px;
+  -webkit-column-width: 288px;
 }
 
 .settings-block {
   display: block;
   padding-bottom: 9px;
   width: 288px;
-  break-inside: avoid;
+  -webkit-column-break-inside: avoid;
 }
 
 .settings-tab.settings-container {
-  column-width: 308px;
+  -webkit-column-width: 308px;
 }
 
 .settings-tab .settings-block {
@@ -162,7 +162,7 @@ fieldset {
 }
 
 #experiments-tab-content .settings-container {
-  column-width: 470px;
+  -webkit-column-width: 470px;
 }
 
 #experiments-tab-content .settings-block {
diff --git a/front_end/sources/debuggerPausedMessage.css b/front_end/sources/debuggerPausedMessage.css
index fbac9dc234..bdbceef9cf 100644
--- a/front_end/sources/debuggerPausedMessage.css
+++ b/front_end/sources/debuggerPausedMessage.css
@@ -43,12 +43,12 @@
 }
 
 .status-icon {
-  filter: hue-rotate(190deg);
+  -webkit-filter: hue-rotate(190deg);
   position: absolute;
   left: 0;
   top: calc(50% - 5px);
 }
 
 .paused-status.error-reason .status-icon {
-  filter: none;
+  -webkit-filter: none;
 }
diff --git a/front_end/sources/sourcesPanel.css b/front_end/sources/sourcesPanel.css
index 6cc04f40d8..a14061aed7 100644
--- a/front_end/sources/sourcesPanel.css
+++ b/front_end/sources/sourcesPanel.css
@@ -38,7 +38,7 @@
 
 .scripts-debug-toolbar-drawer {
   flex: 0 0 52px;
-  transition: margin-top 0.1s ease-in-out;
+  -webkit-transition: margin-top 0.1s ease-in-out;
   margin-top: -26px;
   padding-top: 25px;
   background-color: white;
diff --git a/front_end/sources/sourcesView.css b/front_end/sources/sourcesView.css
index d689a37bd7..0cba20ff55 100644
--- a/front_end/sources/sourcesView.css
+++ b/front_end/sources/sourcesView.css
@@ -54,7 +54,7 @@
   background-color: #444;
 }
 
-@keyframes source-frame-value-update-highlight-animation {
+@-webkit-keyframes source-frame-value-update-highlight-animation {
   from {
     background-color: inherit;
     color: inherit;
@@ -72,7 +72,7 @@
 }
 
 .source-frame-value-update-highlight {
-  animation: source-frame-value-update-highlight-animation 0.8s 1 cubic-bezier(0, 0, 0.2, 1);
+  -webkit-animation: source-frame-value-update-highlight-animation 0.8s 1 cubic-bezier(0, 0, 0.2, 1);
   border-radius: 2px;
 }
 
diff --git a/front_end/text_editor/cmdevtools.css b/front_end/text_editor/cmdevtools.css
index b4496ae6ff..6a94a4efe2 100644
--- a/front_end/text_editor/cmdevtools.css
+++ b/front_end/text_editor/cmdevtools.css
@@ -137,20 +137,20 @@
 }
 
 .cm-highlight {
-  animation: fadeout 2s 0s;
+  -webkit-animation: fadeout 2s 0s;
 }
 
 .-theme-with-dark-background .cm-highlight,
 :host-context(.-theme-with-dark-background) .cm-highlight {
-  animation: fadeout-dark 2s 0s;
+  -webkit-animation: fadeout-dark 2s 0s;
 }
 
-@keyframes fadeout {
+@-webkit-keyframes fadeout {
   from { background-color: rgb(255 255 120); }
   to { background-color: white; }
 }
 
-@keyframes fadeout-dark {
+@-webkit-keyframes fadeout-dark {
   from { background-color: hsl(133deg 100% 30% / 50%); }
   to { background-color: transparent; }
 }
@@ -165,20 +165,20 @@
 }
 
 .cm-highlight.cm-execution-line {
-  animation: fadeout-execution-line 1s 0s;
+  -webkit-animation: fadeout-execution-line 1s 0s;
 }
 
 .-theme-with-dark-background .cm-highlight.cm-execution-line,
 :host-context(.-theme-with-dark-background) .cm-highlight.cm-execution-line {
-  animation: fadeout-execution-line-dark 1s 0s;
+  -webkit-animation: fadeout-execution-line-dark 1s 0s;
 }
 
-@keyframes fadeout-execution-line {
+@-webkit-keyframes fadeout-execution-line {
   from { background-color: rgb(121 141 254); }
   to { background-color: rgb(171 191 254); }
 }
 
-@keyframes fadeout-execution-line-dark {
+@-webkit-keyframes fadeout-execution-line-dark {
   from { background-color: #208043; }
   to { background-color: #14522b; }
 }
@@ -202,25 +202,25 @@
 /* stylelint-disable no-descending-specificity */
 
 .CodeMirror-linenumber:hover {
-  border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23ebeced" stroke="%23ebeced"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23ebeced" stroke="%23ebeced"/></svg>') 1 3 1 1;
   padding-left: 8px;
 }
 
 .-theme-with-dark-background .CodeMirror-linenumber:hover,
 :host-context(.-theme-with-dark-background) .CodeMirror-linenumber:hover {
-  border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%233c4043" stroke="%233c4043"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%233c4043" stroke="%233c4043"/></svg>') 1 3 1 1;
 }
 
 .cm-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
 .-theme-preserve {
   color: white;
-  border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%234285f4" stroke="%231a73e8"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%234285f4" stroke="%231a73e8"/></svg>') 1 3 1 1;
 }
 
 .cm-breakpoint-disabled .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
 .breakpoints-deactivated .cm-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber {
   color: #1a73e8;
-  border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23d9e7fd" stroke="%231a73e8"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23d9e7fd" stroke="%231a73e8"/></svg>') 1 3 1 1;
 }
 
 .-theme-with-dark-background .cm-breakpoint-disabled .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
@@ -228,18 +228,18 @@
 :host-context(.-theme-with-dark-background) .cm-breakpoint-disabled .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
 :host-context(.-theme-with-dark-background) .breakpoints-deactivated .cm-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber {
   color: #1a73e8;
-  border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%232a384e" stroke="%231a73e8"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%232a384e" stroke="%231a73e8"/></svg>') 1 3 1 1;
 }
 
 .cm-breakpoint-conditional .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
 .-theme-preserve {
-  border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23f29900" stroke="%23e37400"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23f29900" stroke="%23e37400"/></svg>') 1 3 1 1;
 }
 
 .cm-breakpoint-disabled.cm-breakpoint-conditional .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
 .breakpoints-deactivated .cm-breakpoint-conditional .CodeMirror-gutter-wrapper .CodeMirror-linenumber {
   color: #e37400;
-  border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23fcebcc" stroke="%23e37400"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23fcebcc" stroke="%23e37400"/></svg>') 1 3 1 1;
 }
 
 .-theme-with-dark-background .cm-breakpoint-disabled.cm-breakpoint-conditional .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
@@ -247,18 +247,18 @@
 :host-context(.-theme-with-dark-background) .cm-breakpoint-disabled.cm-breakpoint-conditional .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
 :host-context(.-theme-with-dark-background) .breakpoints-deactivated .cm-breakpoint-conditional .CodeMirror-gutter-wrapper .CodeMirror-linenumber {
   color: #e37400;
-  border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%234d3c1d" stroke="%23e37400"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%234d3c1d" stroke="%23e37400"/></svg>') 1 3 1 1;
 }
 
 .cm-breakpoint-logpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
 .-theme-preserve {
-  border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23f439a0" stroke="%23d01884"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23f439a0" stroke="%23d01884"/></svg>') 1 3 1 1;
 }
 
 .cm-breakpoint-disabled.cm-breakpoint-logpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
 .breakpoints-deactivated .cm-breakpoint-logpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber {
   color: #d01884;
-  border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23fdd7ec" stroke="%23f439a0"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23fdd7ec" stroke="%23f439a0"/></svg>') 1 3 1 1;
 }
 
 .-theme-with-dark-background .cm-breakpoint-disabled.cm-breakpoint-logpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
@@ -266,7 +266,7 @@
 :host-context(.-theme-with-dark-background) .cm-breakpoint-disabled.cm-breakpoint-logpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
 :host-context(.-theme-with-dark-background) .breakpoints-deactivated .cm-breakpoint-logpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber {
   color: #d01884;
-  border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%234e283d" stroke="%23f439a0"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%234e283d" stroke="%23f439a0"/></svg>') 1 3 1 1;
 }
 
 /* stylelint-enable no-descending-specificity */
@@ -707,8 +707,8 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket {
 .CodeMirror-foldgutter-folded::before {
   background-color: #727272;
   user-select: none;
-  mask-image: url(Images/treeoutlineTriangles.svg);
-  mask-size: 32px 24px;
+  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+  -webkit-mask-size: 32px 24px;
   content: "";
   display: block;
   width: 8px;
@@ -720,11 +720,11 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket {
 }
 
 .CodeMirror-foldgutter-open::before {
-  mask-position: -16px 0;
+  -webkit-mask-position: -16px 0;
 }
 
 .CodeMirror-foldgutter-folded::before {
-  mask-position: 0 0;
+  -webkit-mask-position: 0 0;
 }
 
 .CodeMirror .CodeMirror-line::selection,
diff --git a/front_end/timeline/timelinePaintProfiler.css b/front_end/timeline/timelinePaintProfiler.css
index cdde0b8f1d..391f996f46 100644
--- a/front_end/timeline/timelinePaintProfiler.css
+++ b/front_end/timeline/timelinePaintProfiler.css
@@ -9,7 +9,7 @@
 }
 
 .paint-profiler-image-view .paint-profiler-image-container {
-  transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
 }
 
 .paint-profiler-image-view .paint-profiler-image-container div {
diff --git a/front_end/ui/checkboxTextLabel.css b/front_end/ui/checkboxTextLabel.css
index 1cea4bf761..d1b4703371 100644
--- a/front_end/ui/checkboxTextLabel.css
+++ b/front_end/ui/checkboxTextLabel.css
@@ -28,7 +28,7 @@ input:focus {
 }
 
 input.dt-checkbox-themed {
-  appearance: none;
+  -webkit-appearance: none;
   margin: auto 5px auto 2px;
   border: 1px solid rgb(45 45 45);
   border-radius: 3px;
@@ -43,9 +43,9 @@ input.dt-checkbox-themed::after {
   width: 12px;
   height: 12px;
   background: none;
-  mask-image: url(Images/checkboxCheckmark.svg);
-  mask-size: 11px 11px;
-  mask-position: 0 0;
+  -webkit-mask-image: url(Images/checkboxCheckmark.svg);
+  -webkit-mask-size: 11px 11px;
+  -webkit-mask-position: 0 0;
 }
 
 input.dt-checkbox-themed:checked::after {
diff --git a/front_end/ui/glassPane.css b/front_end/ui/glassPane.css
index 09acc05e00..c6ef6fd2ce 100644
--- a/front_end/ui/glassPane.css
+++ b/front_end/ui/glassPane.css
@@ -57,5 +57,5 @@
 }
 
 :host-context(.-theme-with-dark-background) .arrow {
-  filter: invert(80%);
+  -webkit-filter: invert(80%);
 }
diff --git a/front_end/ui/infobar.css b/front_end/ui/infobar.css
index abc5b41c14..684d07c629 100644
--- a/front_end/ui/infobar.css
+++ b/front_end/ui/infobar.css
@@ -80,17 +80,17 @@
 }
 
 .info-icon {
-  mask-image: url(Images/ic_info_black_18dp.svg);
+  -webkit-mask-image: url(Images/ic_info_black_18dp.svg);
   background-color: hsl(214deg 92% 50%);
 }
 
 .warning-icon {
-  mask-image: url(Images/ic_warning_black_18dp.svg);
+  -webkit-mask-image: url(Images/ic_warning_black_18dp.svg);
   background-color: hsl(44deg 92% 50%);
 }
 
 .icon {
-  mask-size: 18px 18px;
+  -webkit-mask-size: 18px 18px;
   width: 18px;
   height: 18px;
   flex-shrink: 0;
diff --git a/front_end/ui/inspectorCommon.css b/front_end/ui/inspectorCommon.css
index 31ebca5d68..bc8ed9291b 100644
--- a/front_end/ui/inspectorCommon.css
+++ b/front_end/ui/inspectorCommon.css
@@ -182,7 +182,7 @@ input::placeholder {
 }
 
 :host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
-  filter: invert(80%);
+  -webkit-filter: invert(80%);
 }
 
 .harmony-input:not([type]),
@@ -246,7 +246,7 @@ input::placeholder {
 }
 
 .chrome-select {
-  appearance: none;
+  -webkit-appearance: none;
   user-select: none;
   border: 1px solid rgb(0 0 0 / 20%);
   border-radius: 2px;
@@ -307,14 +307,14 @@ input::placeholder {
 }
 
 :not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 1px rgb(255 255 255 / 30%);
+  -webkit-box-shadow: inset 0 0 1px rgb(255 255 255 / 30%);
   background: rgb(36 36 36);
 }
 
 :not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar-thumb {
   border-radius: 2px;
   background-color: #333;
-  box-shadow: inset 0 0 1px rgb(255 255 255 / 50%);
+  -webkit-box-shadow: inset 0 0 1px rgb(255 255 255 / 50%);
 }
 
 :not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar-corner {
@@ -327,14 +327,14 @@ input::placeholder {
 }
 
 :host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 1px rgb(255 255 255 / 30%);
+  -webkit-box-shadow: inset 0 0 1px rgb(255 255 255 / 30%);
   background: rgb(36 36 36);
 }
 
 :host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar-thumb {
   border-radius: 2px;
   background-color: #333;
-  box-shadow: inset 0 0 1px rgb(255 255 255 / 50%);
+  -webkit-box-shadow: inset 0 0 1px rgb(255 255 255 / 50%);
 }
 
 :host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar-corner {
@@ -387,7 +387,7 @@ span[is=dt-icon-label] {
 
 [is=ui-icon].icon-mask {
   background-color: rgb(110 110 110);
-  mask-position: var(--spritesheet-position);
+  -webkit-mask-position: var(--spritesheet-position);
 }
 
 [is=ui-icon]:not(.icon-mask) {
@@ -399,7 +399,7 @@ span[is=dt-icon-label] {
 }
 
 .spritesheet-smallicons.icon-mask {
-  mask-image: url(Images/smallIcons.svg);
+  -webkit-mask-image: url(Images/smallIcons.svg);
 }
 
 .spritesheet-largeicons:not(.icon-mask) {
@@ -407,7 +407,7 @@ span[is=dt-icon-label] {
 }
 
 .spritesheet-largeicons.icon-mask {
-  mask-image: url(Images/largeIcons.svg);
+  -webkit-mask-image: url(Images/largeIcons.svg);
 }
 
 .spritesheet-mediumicons:not(.icon-mask) {
@@ -415,7 +415,7 @@ span[is=dt-icon-label] {
 }
 
 .spritesheet-mediumicons.icon-mask {
-  mask-image: url(Images/mediumIcons.svg);
+  -webkit-mask-image: url(Images/mediumIcons.svg);
 }
 
 .spritesheet-arrowicons {
@@ -426,8 +426,8 @@ span[is=dt-icon-label] {
 :host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons,
 [is=ui-icon].force-white-icons.spritesheet-smallicons,
 .-theme-preserve {
-  mask-image: url(Images/smallIcons.svg);
-  mask-position: var(--spritesheet-position);
+  -webkit-mask-image: url(Images/smallIcons.svg);
+  -webkit-mask-position: var(--spritesheet-position);
   background: #fafafa !important;
 }
 
@@ -435,8 +435,8 @@ span[is=dt-icon-label] {
 :host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons,
 [is=ui-icon].force-white-icons.spritesheet-largeicons,
 .-theme-preserve {
-  mask-image: url(Images/largeIcons.svg);
-  mask-position: var(--spritesheet-position);
+  -webkit-mask-image: url(Images/largeIcons.svg);
+  -webkit-mask-position: var(--spritesheet-position);
   background: #fafafa !important;
 }
 
@@ -444,8 +444,8 @@ span[is=dt-icon-label] {
 :host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicons,
 [is=ui-icon].force-white-icons.spritesheet-mediumicons,
 .-theme-preserve {
-  mask-image: url(Images/mediumIcons.svg);
-  mask-position: var(--spritesheet-position);
+  -webkit-mask-image: url(Images/mediumIcons.svg);
+  -webkit-mask-position: var(--spritesheet-position);
   background: #fafafa !important;
 }
 
diff --git a/front_end/ui/radioButton.css b/front_end/ui/radioButton.css
index cfe509548f..17a73191f3 100644
--- a/front_end/ui/radioButton.css
+++ b/front_end/ui/radioButton.css
@@ -15,7 +15,7 @@
   border: 1px solid #a5a5a5;
   background-image: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
   border-radius: 8px;
-  appearance: none;
+  -webkit-appearance: none;
   vertical-align: middle;
   margin: 0 5px 5px 0;
 }
diff --git a/front_end/ui/searchableView.css b/front_end/ui/searchableView.css
index ee178b9d0b..eef13d74e9 100644
--- a/front_end/ui/searchableView.css
+++ b/front_end/ui/searchableView.css
@@ -18,7 +18,7 @@
 }
 
 .search-replace {
-  appearance: none;
+  -webkit-appearance: none;
   border: 0;
   padding: 0 3px;
   margin: 0;
@@ -69,7 +69,7 @@
 }
 
 .toolbar-search-control {
-  display: flex;
+  display: -webkit-flex;
   position: relative;
   background-color: white;
 }
@@ -104,7 +104,7 @@
 }
 
 :host-context(.-theme-with-dark-background) .toolbar-search-navigation {
-  filter: invert(90%);
+  -webkit-filter: invert(90%);
 }
 
 .toolbar-search-navigation.toolbar-search-navigation-prev.enabled:active {
diff --git a/front_end/ui/slider.css b/front_end/ui/slider.css
index a9fa9af591..4f14772903 100644
--- a/front_end/ui/slider.css
+++ b/front_end/ui/slider.css
@@ -5,7 +5,7 @@
  */
 
 .dt-range-input {
-  appearance: none;
+  -webkit-appearance: none;
   margin: 0;
   padding: 0;
   height: 10px;
@@ -16,7 +16,7 @@
 
 .dt-range-input::-webkit-slider-thumb,
 .-theme-preserve {
-  appearance: none;
+  -webkit-appearance: none;
   margin: 0;
   padding: 0;
   border: 0;
@@ -28,7 +28,7 @@
 }
 
 .dt-range-input::-webkit-slider-runnable-track {
-  appearance: none;
+  -webkit-appearance: none;
   margin: 0;
   padding: 0;
   width: 100%;
diff --git a/front_end/ui/toolbar.css b/front_end/ui/toolbar.css
index a28dd6e242..524aa04248 100644
--- a/front_end/ui/toolbar.css
+++ b/front_end/ui/toolbar.css
@@ -210,7 +210,7 @@ select.toolbar-item:disabled + .toolbar-dropdown-arrow {
 
 select.toolbar-item {
   min-width: 38px;
-  appearance: none;
+  -webkit-appearance: none;
   border: 1px solid transparent;
   border-radius: 0;
   padding: 0 13px 0 5px;
diff --git a/front_end/ui/tooltip.css b/front_end/ui/tooltip.css
index 697c674d31..3ac0b71c8e 100644
--- a/front_end/ui/tooltip.css
+++ b/front_end/ui/tooltip.css
@@ -12,7 +12,7 @@
   line-height: 14px;
   display: flex;
   align-items: center;
-  filter: drop-shadow(0 1px 2px hsl(0deg 0% 0% / 30%));
+  -webkit-filter: drop-shadow(0 1px 2px hsl(0deg 0% 0% / 30%));
   border: 1px solid hsl(0deg 0% 0% / 10%);
   background-clip: padding-box;
   box-sizing: border-box;
diff --git a/front_end/ui/treeoutline.css b/front_end/ui/treeoutline.css
index 0ffe25c621..1a159c009f 100644
--- a/front_end/ui/treeoutline.css
+++ b/front_end/ui/treeoutline.css
@@ -109,11 +109,11 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * {
 
 .tree-outline li::before {
   user-select: none;
-  mask-image: url(Images/treeoutlineTriangles.svg);
-  mask-size: 32px 24px;
-  mask-position: 0 0;
+  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+  -webkit-mask-size: 32px 24px;
+  -webkit-mask-position: 0 0;
   background-color: #727272;
-  content: "\A0\A0";
+  content: "\00a0\00a0";
   text-shadow: none;
   margin-right: -2px;
   height: 12px;
@@ -125,7 +125,7 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * {
 }
 
 .tree-outline li.parent.expanded::before {
-  mask-position: -16px 0;
+  -webkit-mask-position: -16px 0;
 }
 
 .tree-outline ol.children {