fix(addon-commerce): InputCardGrouped fix problem with in safari (#…

…1696)
taiga-family · May 4, 2022 · 9948640 · 9948640
1 parent 0200895
commit 9948640
Show file tree

Hide file tree

Showing 8 changed files with 231 additions and 68 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
@@ -29,15 +29,9 @@
 
 .t-common-wrapper {
     position: relative;
-    z-index: 2; // note: fix problem in safari, where were incorrect paint child layers by css translate3d
     height: 100%;
     width: 100%;
     overflow: hidden;
-
-    .t-wrapper,
-    .t-icons {
-        z-index: 1;
-    }
 }
 
 .t-wrapper {
@@ -81,31 +75,17 @@
     line-height: 2.25rem;
     pointer-events: none;
 
-    &:before {
+    &_enable-mask:before {
         content: attr(data-before);
     }
 
-    :-webkit-autofill ~ & {
-        background: var(--tui-autofill);
-    }
-
-    :-webkit-autofill ~ &_inactive,
-    &_inactive,
-    :host._disabled &_inactive {
-        color: transparent;
-        background: transparent;
-        transition: color 0s var(--tui-duration), background 0s var(--tui-duration);
-
-        &:before {
-            color: transparent;
-            transition: color 0s var(--tui-duration);
-        }
+    &_enable-mask .t-collapsed-wrapper {
+        left: 1.375rem;
     }
 }
 
 .t-collapsed-wrapper {
     position: absolute;
-    left: 1.375rem;
     top: 0;
     display: block;
     width: 100%;
@@ -119,7 +99,6 @@
     bottom: 0;
     right: 100%;
     display: block;
-    text-indent: -0.375rem;
     transform: translate3d(100%, 0, 0);
 
     &_collapsed {
@@ -133,47 +112,34 @@
     border: 0;
     padding: 0 1rem;
 
-    &:not(.t-input_prefilled)::placeholder {
+    &::placeholder {
         color: var(--tui-text-03);
-        opacity: 0;
     }
 
     :host[data-mode='onDark'] &::placeholder {
         color: var(--tui-text-03-night);
     }
 
-    :host._focused &:not(:read-only)::placeholder {
-        opacity: 1;
-    }
-
     &_card {
-        transition: color 0s var(--tui-duration);
-
-        &::-webkit-textfield-decoration-container {
-            display: none;
+        &:not(.t-input_hidden),
+        &:not(.t-input_hidden)::placeholder,
+        &:not(.t-input_hidden):-webkit-autofill {
+            caret-color: var(--tui-base-09);
+            color: transparent !important;
+            -webkit-text-fill-color: transparent !important;
         }
 
-        :host._disabled & {
-            transition: color 0s;
+        //noinspection CssInvalidPseudoSelector
+        &::-webkit-credit-card-auto-fill-button {
+            pointer-events: none;
+            background-color: transparent !important;
+            -webkit-mask-image: none !important;
         }
     }
 
     &_inert {
         pointer-events: none;
     }
-
-    &_hidden,
-    :host._disabled &_hidden {
-        color: transparent;
-        transition: color 0s;
-
-        &:-webkit-autofill,
-        &:-webkit-autofill:hover,
-        &:-webkit-autofill:focus {
-            color: transparent !important;
-            -webkit-text-fill-color: transparent !important;
-        }
-    }
 }
 
 .t-icons {

diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.template.html b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.template.html
@@ -26,7 +26,7 @@
                 tuiInputMode="numeric"
                 class="t-input t-input_card"
                 [class.t-input_inert]="cardPrefilled"
-                [class.t-input_hidden]="isCardCollapsed"
+                [class.t-input_hidden]="!card.length && focused"
                 [attr.id]="idCard"
                 [attr.aria-invalid]="!cardPrefilled && !(this.card | tuiMapper: cardValidator)"
                 [placeholder]="cardPrefilled ? '' : exampleText"
@@ -42,8 +42,8 @@
             <span
                 aria-hidden="true"
                 class="t-collapsed"
-                [class.t-collapsed_inactive]="!isCardCollapsed"
                 [attr.data-before]="masked"
+                [class.t-collapsed_enable-mask]="isCardCollapsed"
             >
                 <span class="t-collapsed-wrapper">
                     <span

diff --git a/projects/core/styles/mixins/textfield.less b/projects/core/styles/mixins/textfield.less
@@ -144,6 +144,8 @@
     user-select: none;
     color: var(--tui-text-02);
     pointer-events: none;
+    will-change: transform;
+    transform: translateY(0);
 
     &_raised {
         transform: translateY(-0.625rem);
@@ -204,6 +206,7 @@
 
     @supports (-webkit-hyphens: none) {
         & {
+            will-change: unset;
             transition-property: transform, color, letter-spacing;
         }
     }

diff --git a/projects/demo-integrations/cypress/support/commands.ts b/projects/demo-integrations/cypress/support/commands.ts
@@ -17,6 +17,8 @@ declare global {
             tuiWaitKitDialog: typeof tuiWaitKitDialog;
             tuiSetNightMode: typeof tuiSetNightMode;
             tuiHideNavigation: typeof tuiHideNavigation;
+
+            tab(options?: Partial<{shift: Boolean}>): Chainable;
         }
     }
 }

diff --git a/projects/demo-integrations/cypress/support/index.ts b/projects/demo-integrations/cypress/support/index.ts
@@ -1 +1,2 @@
 import './commands';
+import 'cypress-plugin-tab';