javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): revert old segment fix in favor of new one (#22434)

Browse Source 
This reverts commit 68afc49e9ed27acffb0b765b7be6b03e8574850d.
This commit is contained in:
Liam DeBeasi
2020-11-05 11:38:46 -05:00
committed by GitHub
parent 5a4d0c0217
commit dd307b60b6
3 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/segment-button/segment-button.ios.scss
View File

@ -38,7 +38,7 @@
min-height: #{$segment-button-ios-min-height}; min-height: #{$segment-button-ios-min-height};
// Necessary for the z-index to work properly // Necessary for the z-index to work properly
transform: translate(0, 0); transform: translate3d(0, 0, 0);
font-size: #{$segment-button-ios-font-size}; font-size: #{$segment-button-ios-font-size};
@ -62,6 +62,8 @@
content: ""; content: "";
opacity: 1; opacity: 1;
will-change: opacity;
} }
:host(:first-of-type)::before { :host(:first-of-type)::before {

6
core/src/components/segment-button/segment-button.scss
View File

@ -81,7 +81,7 @@
@include text-inherit(); @include text-inherit();
@include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start)); @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@include transform(translate(0,0)); @include transform(translate3d(0,0,0));
display: flex; display: flex;
position: relative; position: relative;
@ -270,6 +270,8 @@ ion-ripple-effect {
box-sizing: border-box; box-sizing: border-box;
will-change: transform, opacity;
pointer-events: none; pointer-events: none;
} }
@ -304,4 +306,4 @@ ion-ripple-effect {
.segment-button-indicator-animated { .segment-button-indicator-animated {
transition: none; transition: none;
} }
} }

2
core/src/components/segment/segment.tsx
View File

@ -260,7 +260,7 @@ export class Segment implements ComponentInterface {
// Scale the indicator width to match the previous indicator width // Scale the indicator width to match the previous indicator width
// and translate it on top of the previous indicator // and translate it on top of the previous indicator
const transform = `translate(${xPosition}px, 0) scaleX(${widthDelta})`; const transform = `translate3d(${xPosition}px, 0, 0) scaleX(${widthDelta})`;
writeTask(() => { writeTask(() => {
// Remove the transition before positioning on top of the previous indicator // Remove the transition before positioning on top of the previous indicator