Hi everyone!
I am building an app using ionic 4, react and capacitor.
So far I’ve been using responsive view on chrome to design the layout and the styling has been pretty consistent between the browser and the app (running on android).
That is until I applied the following styles to the ion-slide component to make the inactive slides appear smaller and faded.
ion-slide.swiper-slide {
transition: opacity 0.2s linear 0.1s, transform 0.2s linear 0.1s
}
ion-slide:not(.swiper-slide-active) {
opacity: 0.7;
transform: scale(0.8)
}
It works as expected on the browser but on android, the transform property does not apply. The opacity and transition for the opacity work but just not the transform. I’ve also tried translateY to see if it was only the scaling property with an issue but that too doesn’t work.
Transform works properly on android when applied to other ionic components. For example, I applied the following to an ion-button and it works just fine.
.add-icon-button {
font-size: 30px;
color: var(--ion-color-accent);
transition: transform 0.2s cubic-bezier(.01,-0.46,.53,3.04), color 0.2s cubic-bezier(.01,-0.46,.53,1.54)
}
.add-icon-button:active {
transform: scale(0.9);
color: var(--ion-color-accent-shade)
}
I’m lost at this point as I know I’m applying the styles correctly (works on the browser and the opacity works on android) and there’s no issue with the transform attribute as a whole (it applies to and works on other components). So, I’d appreciate if someone could provide some insights on what could be the problem here and if anyone has experienced such inconsistencies before, how did you go about solving it? Your help would be greatly appreciated.
TL;DR: Transform property does not work on ion-slide component when run on android; any solutions?