fix: use -webkit-user-select for text selection on Safari (#10982)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>

desktop/src/ui/findInPageBar.ts

@@ -358,6 +358,7 @@ const shadowStyles = `
   font-variant-numeric: tabular-nums;
   text-align: right;
   color: rgba(0, 0, 0, 0.52);
+  -webkit-user-select: none;
   user-select: none;
   flex-shrink: 0;
 }

desktop/src/ui/index.ejs

@@ -96,6 +96,7 @@
             cursor: pointer;
             font-size: 13px;
             position: relative;
+            -webkit-user-select: none;
             user-select: none;
             align-items: normal; /* explicitly set this up to prevent values from above */
         }
@@ -151,6 +152,7 @@
             text-align: left;
             cursor: pointer;
             font-size: 13px;
+            -webkit-user-select: none;
             user-select: none;
         }
 
@@ -185,6 +187,7 @@
             font-size: 13px;
             line-height: 32px;
             color: var(--text-primary);
+            -webkit-user-select: none;
             user-select: none;
             -webkit-app-region: drag;
             white-space: nowrap;
@@ -208,6 +211,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            -webkit-user-select: none;
             user-select: none;
         }
 

packages/presentation/src/components/MessageBox.svelte

@@ -107,6 +107,7 @@
     max-width: 40rem;
     background: var(--theme-popup-color);
     border-radius: 0.5rem;
+    -webkit-user-select: none;
     user-select: none;
     box-shadow: var(--theme-popup-shadow);
 

packages/theme/styles/_layouts.scss

@@ -61,6 +61,7 @@ button {
   border: 1px solid transparent;
   outline: none;
   cursor: pointer;
+  -webkit-user-select: none;
   user-select: none;
 }
 input {
@@ -124,6 +125,7 @@ li {
 }
 
 p {
+  -webkit-user-select: inherit;
   user-select:inherit;
   
   a {
@@ -345,6 +347,7 @@ input.search {
     color: var(--theme-content-color);
 
     overflow: hidden;
+    -webkit-user-select: none;
     user-select: none;
 
     &:not(.nowrap) {
@@ -886,6 +889,7 @@ a.no-line {
   font-size: 1rem;
   color: var(--theme-caption-color);
   user-select: none;
+  -webkit-user-select: none;
   text-rendering: optimizeLegibility;
 }
 .trans-title {
@@ -894,6 +898,7 @@ a.no-line {
   font-size: .75rem;
   color: var(--theme-dark-color);
   user-select: none;
+  -webkit-user-select: none;
   text-rendering: optimizeLegibility;
 }
 .text-16px { font-size: 16px; }
@@ -941,6 +946,7 @@ a.no-line {
   overflow: hidden;
   white-space: pre-wrap;
   width: max-content;
+  -webkit-user-select: none;
   user-select: none;
   min-width: auto;
 }

packages/theme/styles/_text-editor.scss

@@ -281,6 +281,7 @@
 
 @supports (selector(:has(.text-editor-image-container))) {
   p:has(> .text-editor-image-container) {
+    -webkit-user-select: none;
     user-select: none;
   }
 }
@@ -429,6 +430,7 @@
   color: transparent;
   background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20id%3D%22note%22%3E%3Crect%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22none%22%3E%3C%2Frect%3E%3Cline%20x1%3D%2296%22%20x2%3D%22160%22%20y1%3D%2296%22%20y2%3D%2296%22%20fill%3D%22none%22%20stroke%3D%22%23313131%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%228%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2296%22%20x2%3D%22160%22%20y1%3D%22128%22%20y2%3D%22128%22%20fill%3D%22none%22%20stroke%3D%22%23313131%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%228%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2296%22%20x2%3D%22128%22%20y1%3D%22160%22%20y2%3D%22160%22%20fill%3D%22none%22%20stroke%3D%22%23313131%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%228%22%3E%3C%2Fline%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23313131%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%228%22%20d%3D%22M156.68629%2C216H48a8%2C8%2C0%2C0%2C1-8-8V48a8%2C8%2C0%2C0%2C1%2C8-8H208a8%2C8%2C0%2C0%2C1%2C8%2C8V156.68629a8%2C8%2C0%2C0%2C1-2.34315%2C5.65686l-51.3137%2C51.3137A8%2C8%2C0%2C0%2C1%2C156.68629%2C216Z%22%3E%3C%2Fpath%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23313131%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%228%22%20points%3D%22215.277%20159.992%20160%20159.992%20160%20215.272%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E');
   background-repeat: no-repeat;
+  -webkit-user-select: none;
   user-select: none;
   cursor: pointer;
 

packages/theme/styles/components.scss

@@ -204,6 +204,7 @@
 
   & > * {
     pointer-events: none;
+    -webkit-user-select: none;
     user-select: none;
     -webkit-user-drag: none;
   }
@@ -1220,6 +1221,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     user-select: none;
+    -webkit-user-select: none;
   }
   .ac-header__counter {
     flex-shrink: 0;
@@ -1241,6 +1243,7 @@
     -webkit-line-clamp: 2;
     line-clamp: 2;
     user-select: none;
+    -webkit-user-select: none;
   }
 
   .ac-header__icon-button {
@@ -1319,6 +1322,7 @@
       color: var(--dark-color);
       cursor: pointer;
       user-select: none;
+      -webkit-user-select: none;
 
       &.selected {
         border-top: .125rem solid transparent;
@@ -1764,6 +1768,7 @@
     color: var(--theme-dark-color);
     box-shadow: inset 0 -1px 0 0 var(--theme-table-border-color);
     user-select: none;
+    -webkit-user-select: none;
     // z-index: 5;
 
     &.sortable { cursor: pointer; }
@@ -2015,6 +2020,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
     user-select: none;
+    -webkit-user-select: none;
 
     min-width: 0;
     font-size: .75rem;
@@ -2101,6 +2107,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
     user-select: none;
+    -webkit-user-select: none;
     min-width: 0;
 
     &.selected { color: var(--caption-color); }

packages/theme/styles/dialogs.scss

@@ -62,6 +62,7 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       user-select: none;
+      -webkit-user-select: none;
       min-width: 0;
       line-height: 150%;
       color: var(--theme-caption-color);

packages/theme/styles/global.scss

@@ -156,6 +156,7 @@ body {
   color: var(--content-color);
   background-color: var(--theme-bg-color);
   user-select: none;
+  -webkit-user-select: none;
 
   --status-bar-height: 36px;
   --status-bar-normal-height: 36px;

packages/theme/styles/popups.scss

@@ -363,6 +363,7 @@
   min-height: 0;
   min-width: 0;
   user-select: none;
+  -webkit-user-select: none;
   
   &:not(.embedded) {
     max-width: 30rem;

packages/theme/styles/prose.scss

@@ -542,6 +542,7 @@ pre.proseCodeBlock>pre.proseCode {
   }
 
   header {
+    -webkit-user-select: none;
     user-select: none;
     position: absolute;
     right: 0.5rem;

packages/ui/src/components/MiniToggle.svelte

@@ -55,6 +55,7 @@
     vertical-align: middle;
     font-size: inherit;
     user-select: none;
+    -webkit-user-select: none;
     .chBox {
       position: absolute;
       width: 1px;

packages/ui/src/components/ModernCheckbox.svelte

@@ -43,6 +43,7 @@
   .checkbox-label {
     color: var(--global-primary-TextColor);
     user-select: none;
+    -webkit-user-select: none;
   }
   .checkbox {
     overflow: hidden;

packages/ui/src/components/ModernEditbox.svelte

@@ -300,6 +300,7 @@
         font-size 0.2s;
       pointer-events: none;
       user-select: none;
+      -webkit-user-select: none;
     }
     input:focus + .label,
     input:not(:placeholder-shown) + .label {

packages/ui/src/components/ModernRadioButton.svelte

@@ -43,6 +43,7 @@
   .radioButton-label {
     color: var(--global-primary-TextColor);
     user-select: none;
+    -webkit-user-select: none;
   }
   .radioButton {
     overflow: hidden;

packages/ui/src/components/ModernToggle.svelte

@@ -75,6 +75,7 @@
   .toggle-label {
     color: var(--global-primary-TextColor);
     user-select: none;
+    -webkit-user-select: none;
   }
   .toggle {
     overflow: hidden;

packages/ui/src/components/PopupMenu.svelte

@@ -112,6 +112,7 @@
     border-radius: 0.75rem;
     box-shadow: var(--popup-shadow);
     user-select: none;
+    -webkit-user-select: none;
     z-index: 10;
   }
   .scrolling {

packages/ui/src/components/Scroller.svelte

@@ -587,6 +587,7 @@
   class:sticked={stickedScrollBars}
   class:thin={thinScrollBars}
   class:shrink
+  style:-webkit-user-select={isScrolling ? 'none' : 'inherit'}
   style:user-select={isScrolling ? 'none' : 'inherit'}
   style:--scroller-header-height={`${(fade.multipler?.top ?? 0) * fz + 2}px`}
   style:--scroller-footer-height={`${(fade.multipler?.bottom ?? 0) * fz + (stickedScrollBars ? 0 : 2)}px`}
@@ -770,6 +771,7 @@
     outline: none;
     box-shadow: 0 0 0.375rem rgba($color: #000000, $alpha: 0.1);
     user-select: none;
+    -webkit-user-select: none;
     -webkit-tap-highlight-color: transparent;
     tap-highlight-color: transparent;
 

packages/ui/src/components/ShowMore.svelte

@@ -87,6 +87,7 @@
     border-radius: 2.5rem;
     // z-index: 1;
     user-select: none;
+    -webkit-user-select: none;
     cursor: pointer;
 
     &.outter {

packages/ui/src/components/Status.svelte

@@ -21,6 +21,7 @@
 <style lang="scss">
   .container {
     user-select: none;
+    -webkit-user-select: none;
     font-size: 14px;
     color: var(--theme-content-color);
     &.WARNING {

packages/ui/src/components/StatusBadge.svelte

@@ -15,6 +15,7 @@
 
 <style lang="scss">
   .container {
+    -webkit-user-select: none;
     user-select: none;
     color: var(--theme-content-color);
     &.OK {

packages/ui/src/components/StylishEdit.svelte

@@ -111,6 +111,7 @@
       opacity: 0.8;
       transition: top 200ms;
       pointer-events: none;
+      -webkit-user-select: none;
       user-select: none;
     }
     input:focus + .label,

packages/ui/src/components/SwitcherBase.svelte

@@ -63,6 +63,7 @@
     span {
       text-wrap: nowrap;
       color: var(--global-secondary-TextColor);
+      -webkit-user-select: none;
       user-select: none;
     }
   }

packages/ui/src/components/TabsControl.svelte

@@ -93,6 +93,7 @@
       height: 4.5rem;
       color: var(--theme-dark-color);
       cursor: pointer;
+      -webkit-user-select: none;
       user-select: none;
 
       &.selected {

packages/ui/src/components/TextArea.svelte

@@ -69,6 +69,7 @@
       font-weight: 500;
       color: var(--accent-color);
       pointer-events: none;
+      -webkit-user-select: none;
       user-select: none;
     }
 

packages/ui/src/components/TextAreaEditor.svelte

@@ -52,6 +52,7 @@
 <div bind:this={openedContainerRef}>
   <div
     class="flex-col background-accent-bg-color border-divider-color border-radius-1 pt-1 pb-1 pr-2 pl-2"
+    style:-webkit-user-select="none"
     style:user-select="none"
   >
     <TextArea

packages/ui/src/components/Toggle.svelte

@@ -47,6 +47,7 @@
     // line-height: 1.75rem;
     vertical-align: middle;
     font-size: inherit;
+    -webkit-user-select: none;
     user-select: none;
     cursor: pointer;
 

packages/ui/src/components/ToggleWithLabel.svelte

@@ -48,6 +48,7 @@
   .caption {
     margin-right: 1rem;
     color: var(--caption-color);
+    -webkit-user-select: none;
     user-select: none;
     span {
       display: block;

packages/ui/src/components/TooltipInstance.svelte

@@ -501,6 +501,7 @@
     border: 1px solid var(--theme-popup-divider);
     border-radius: 0.75rem;
     box-shadow: var(--theme-popup-shadow);
+    -webkit-user-select: none;
     user-select: none;
 
     &.doublePadding {
@@ -540,6 +541,7 @@
   .nub {
     position: fixed;
     // background-color: rgba(255, 255, 0, .5);
+    -webkit-user-select: none;
     user-select: none;
     pointer-events: none;
 
@@ -634,6 +636,7 @@
     border: 1px solid var(--theme-popup-divider);
     border-radius: 0.25rem;
     box-shadow: var(--theme-popup-shadow);
+    -webkit-user-select: none;
     user-select: none;
     display: flex;
     align-items: center;

plugins/activity-resources/src/components/reactions/Reactions.svelte

@@ -106,6 +106,7 @@
     row-gap: 0.25rem;
     min-width: 0;
     min-height: 0;
+    -webkit-user-select: none;
     user-select: none;
 
     .counter {

plugins/billing-resources/src/components/StatsCard.svelte

@@ -45,6 +45,7 @@
     font-weight: 400;
     font-size: 2rem;
     color: var(--theme-caption-color);
+    -webkit-user-select: none;
     user-select: none;
   }
 </style>

plugins/calendar-resources/src/components/UpdateRecInstancePopup.svelte

@@ -93,6 +93,7 @@
     max-width: 40rem;
     background: var(--theme-popup-color);
     border-radius: 0.5rem;
+    -webkit-user-select: none;
     user-select: none;
     box-shadow: var(--theme-popup-shadow);
 

plugins/card-resources/src/components/CardSection.svelte

@@ -29,6 +29,7 @@
     display: flex;
     flex-direction: column;
     cursor: pointer;
+    -webkit-user-select: none;
     user-select: none;
     border-radius: 0.5rem;
     width: 100%;

plugins/controlled-documents-resources/src/components/document/EditDocReasonAndImpact.svelte

@@ -168,6 +168,7 @@
     font-weight: 500;
     font-size: var(--body-font-size);
     color: var(--theme-caption-color);
+    -webkit-user-select: none;
     user-select: none;
   }
 </style>

plugins/controlled-documents-resources/src/components/print/DocumentPrintTitlePage.svelte

@@ -125,6 +125,7 @@
     font-weight: 500;
     font-size: $font-size;
     color: var(--theme-caption-color);
+    -webkit-user-select: none;
     user-select: none;
     width: 10rem;
     flex: 0 0 auto;

plugins/devmodel-resources/src/components/ModelView.svelte

@@ -78,6 +78,7 @@
     font-size: 0.75rem;
     color: var(--dark-color);
     box-shadow: inset 0 -1px 0 0 var(--trans-content-10);
+    -webkit-user-select: none;
     user-select: none;
   }
 

plugins/document-resources/src/components/sidebar/History.svelte

@@ -95,6 +95,7 @@
       flex-grow: 1;
       font-weight: 500;
       color: var(--caption-color);
+      -webkit-user-select: none;
       user-select: none;
     }
   }

plugins/document-resources/src/components/sidebar/References.svelte

@@ -79,6 +79,7 @@
       flex-grow: 1;
       font-weight: 500;
       color: var(--caption-color);
+      -webkit-user-select: none;
       user-select: none;
     }
   }

plugins/emoji-resources/src/components/EmojiPopup.svelte

@@ -330,6 +330,7 @@
     min-width: 0;
     min-height: 29rem;
     max-height: 29rem;
+    -webkit-user-select: none;
     user-select: none;
 
     :global(.mobile-theme) & {

plugins/hr-resources/src/components/schedule/YearView.svelte

@@ -188,6 +188,7 @@
       line-height: 105%;
       color: var(--dark-color);
       border: none;
+      -webkit-user-select: none;
       user-select: none;
       cursor: pointer;
 

plugins/inbox-resources/src/components/NotificationTemplate.svelte

@@ -25,6 +25,7 @@
     display: flex;
     flex-direction: column;
     cursor: pointer;
+    -webkit-user-select: none;
     user-select: none;
 
     &:first-child .marker {

plugins/inventory-resources/src/components/HierarchyView.svelte

@@ -98,6 +98,7 @@
     font-size: 0.75rem;
     color: var(--dark-color);
     box-shadow: inset 0 -1px 0 0 var(--divider-color);
+    -webkit-user-select: none;
     user-select: none;
     z-index: 5;
     padding: 0.5rem 1.5rem;

plugins/login-resources/src/components/InviteLink.svelte

@@ -213,6 +213,7 @@
     max-width: 40rem;
     background: var(--popup-bg-color);
     border-radius: 1.25rem;
+    -webkit-user-select: none;
     user-select: none;
     box-shadow: var(--popup-shadow);
 

plugins/love-resources/src/components/VideoPopup.svelte

@@ -73,6 +73,7 @@
     align-items: stretch;
     width: 100%;
     max-width: 100%;
+    -webkit-user-select: none;
     user-select: none;
 
     &:not(.isDock) {

plugins/notification-resources/src/components/DocNotifyContextCard.svelte

@@ -349,6 +349,7 @@
   .notification {
     position: relative;
     cursor: pointer;
+    -webkit-user-select: none;
     user-select: none;
 
     .embeddedMarker {

plugins/process-resources/src/components/settings/StatesInlineEditor.svelte

@@ -69,6 +69,7 @@
     font-weight: 500;
     font-size: 1rem;
     color: var(--theme-caption-color);
+    -webkit-user-select: none;
     user-select: none;
     border-bottom: 1px solid var(--theme-divider-color);
   }

plugins/process-resources/src/components/settings/TransitionEditor.svelte

@@ -215,6 +215,7 @@
       font-weight: 500;
       font-size: 1rem;
       color: var(--theme-caption-color);
+      -webkit-user-select: none;
       user-select: none;
       border-bottom: 1px solid var(--theme-divider-color);
     }

plugins/process-resources/src/components/settings/TransitionsInlineEditor.svelte

@@ -82,6 +82,7 @@
     font-weight: 500;
     font-size: 1rem;
     color: var(--theme-caption-color);
+    -webkit-user-select: none;
     user-select: none;
     border-bottom: 1px solid var(--theme-divider-color);
   }

plugins/recorder-resources/src/components/Draggable.svelte

@@ -144,6 +144,7 @@
   .draggable {
     position: absolute;
     cursor: grab;
+    -webkit-user-select: none;
     user-select: none;
 
     &.dragging {

plugins/request-resources/src/components/RequestStatusPresenter.svelte

@@ -35,6 +35,7 @@
 <style lang="scss">
   .yesno-container {
     max-width: fit-content;
+    -webkit-user-select: none;
     user-select: none;
 
     span {

plugins/setting-resources/src/components/ApiTokenPopup.svelte

@@ -78,6 +78,7 @@
     max-width: 40rem;
     background: var(--popup-bg-color);
     border-radius: 1.25rem;
+    -webkit-user-select: none;
     user-select: none;
     box-shadow: var(--popup-shadow);
 

plugins/tags-resources/src/components/CollapsedTags.svelte

@@ -51,6 +51,7 @@
     height: 1.5rem;
     border-radius: 1.5rem;
     border: 1px solid var(--theme-button-border);
+    -webkit-user-select: none;
     user-select: none;
 
     .item {

plugins/tags-resources/src/components/TagFilterPresenter.svelte

@@ -37,6 +37,7 @@
     border-radius: 1.5rem;
     height: 1.5rem;
     padding: 0.25rem 0.625rem;
+    -webkit-user-select: none;
     user-select: none;
 
     .label {

plugins/tags-resources/src/components/TagReferencePresenter.svelte

@@ -88,6 +88,7 @@
     background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 1.5rem;
+    -webkit-user-select: none;
     user-select: none;
 
     &:hover {

plugins/tags-resources/src/components/TagsReferencePresenter.svelte

@@ -70,6 +70,7 @@
     border: 1px solid var(--theme-button-border);
     border-radius: 1.5rem;
     user-select: none;
+    -webkit-user-select: none;
 
     &:hover {
       background-color: var(--theme-button-hovered);

plugins/text-editor-resources/src/components/StyledTextArea.svelte

@@ -98,6 +98,7 @@
       transition: top 200ms;
       pointer-events: none;
       user-select: none;
+      -webkit-user-select: none;
     }
   }
 </style>

plugins/text-editor-resources/src/components/StyledTextBox.svelte

@@ -410,6 +410,7 @@
       transition: top 200ms;
       pointer-events: none;
       user-select: none;
+      -webkit-user-select: none;
     }
 
     :global(.textInput),

plugins/view-resources/src/components/BooleanPresenter.svelte

@@ -30,6 +30,7 @@
   .yesno-container {
     max-width: fit-content;
     user-select: none;
+    -webkit-user-select: none;
 
     span {
       width: 1.6rem;

plugins/workbench-resources/src/components/statistics/Params.svelte

@@ -98,6 +98,7 @@
     background: var(--theme-popup-color);
     border-radius: 0.5rem;
     user-select: none;
+    -webkit-user-select: none;
     box-shadow: var(--theme-popup-shadow);
 
     .message {