I’ve got a scroll error with ion-segment.
When i click on the right segments, all the page move to left and break the design.
It’s due to the animation that center the active segment.
I'm using this arb
home.page.html
<ion-content>
<ng-container *ngIf="loaded">
<ion-accordion-group [multiple]="true" [value]="[]">
<ion-accordion value="fourth">
<ion-item slot="header">
<ion-icon slot="start" name="cube"></ion-icon>
<ion-label>{{ 'home.accordion.merch.title'|translate }}</ion-label>
<ion-badge *ngIf="articlesCount" slot="end" color="warning">{{ articlesCount }}</ion-badge>
</ion-item>
<div class="ion-padding-vertical" slot="content">
<app-merch (articlesCount)="onArticleCount($event)"></app-merch>
</div>
</ion-accordion>
</ion-accordion-group>
</ng-container>
</ion-content>
merch.page.html
<ion-toolbar color="default">
<ion-segment [scrollable]="true" color="success" (ionChange)="segmentChanged($event)" value="all">
<ion-segment-button value="all">
<ion-label>
<ion-icon [src]="iconBoxOpen"></ion-icon>
</ion-label>
</ion-segment-button>
<ion-segment-button value="0">
<ion-label>
<ion-icon [src]="iconSnowflake"></ion-icon>
</ion-label>
</ion-segment-button>
<!-- OTHER SEGMENTS-->
</ion-segment>
</ion-toolbar>
<ng-container>
<ion-title *ngIf="activeTab === 'all'" class="ion-margin-vertical">
<ion-icon [src]="iconBoxOpen" class="ion-margin-end"></ion-icon>
{{ 'merch.category.title.all'|translate }}
</ion-title>
<ion-title *ngIf="activeTab !== 'all'" class="ion-margin-vertical">
{{ ('merch.category.title.category_' + activeTab)|translate }}
</ion-title>
<ion-searchbar animated="true" [placeholder]="'merch.search.placeholder' | translate" (ionChange)="onSearch($event)" (ionClear)="onClearSearch()"></ion-searchbar>
<ng-container *ngFor="let articleGroup of filteredArticleGroups">
<!-- HERE THE TAB CONTENT-->
</ng-container>
</ng-container>
Here is the result
Thank you for your help

