javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 10:41:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(label): use translateY so input caret shows up due to webkit issue (#21949)

Browse Source 
resolves #21943
This commit is contained in:
Liam DeBeasi
2020-08-21 13:59:19 -04:00
committed by GitHub
parent 9f4b01e17f
commit 00eac33053
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/components/label/label.md.scss
View File

@ -13,15 +13,19 @@
// Material Design Stacked & Floating Labels // Material Design Stacked & Floating Labels
// -------------------------------------------------- // --------------------------------------------------
/**
* When translating the label, we need to use translateY
* instead of translate3d due to a WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=215731
*/
:host(.label-stacked) { :host(.label-stacked) {
@include transform-origin(start, top); @include transform-origin(start, top);
@include transform(translate3d(0, 50%, 0), scale(.75)); @include transform(translateY(50%), scale(.75));
transition: color 150ms $label-md-transition-timing-function; transition: color 150ms $label-md-transition-timing-function;
} }
:host(.label-floating) { :host(.label-floating) {
@include transform(translate3d(0, 96%, 0)); @include transform(translateY(96%));
@include transform-origin(start, top); @include transform-origin(start, top);
transition: transition:
@ -41,7 +45,7 @@
:host-context(.item-has-focus).label-floating, :host-context(.item-has-focus).label-floating,
:host-context(.item-has-placeholder).label-floating, :host-context(.item-has-placeholder).label-floating,
:host-context(.item-has-value).label-floating { :host-context(.item-has-value).label-floating {
@include transform(translate3d(0, 50%, 0), scale(.75)); @include transform(translateY(50%), scale(.75));
} }
:host-context(.item-has-focus).label-stacked, :host-context(.item-has-focus).label-stacked,