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

perf(segment): improve scrolling performance on ios when using segment (#22110)

Browse Source 
resolves #22095
This commit is contained in:
Liam DeBeasi
2020-09-21 15:39:09 -04:00
committed by GitHub
parent ec9e0a2ee7
commit 68afc49e9e
3 changed files with 4 additions and 8 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: translate3d(0, 0, 0); transform: translate(0, 0);
font-size: #{$segment-button-ios-font-size}; font-size: #{$segment-button-ios-font-size};
@ -62,8 +62,6 @@
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(translate3d(0,0,0)); @include transform(translate(0,0));
display: flex; display: flex;
position: relative; position: relative;
@ -270,8 +270,6 @@ ion-ripple-effect {
box-sizing: border-box; box-sizing: border-box;
will-change: transform, opacity;
pointer-events: none; pointer-events: none;
} }
@ -306,4 +304,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

@ -244,7 +244,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 = `translate3d(${xPosition}px, 0, 0) scaleX(${widthDelta})`; const transform = `translate(${xPosition}px, 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