Ionic scrolling not working properly with custom icons for tabs?

Ionic Framework ionic-v3
1

i am faceing issue with scrolling recently i added custom svg icon to tabs then on wards i am facing issue with scrolling it’s not working properly when ever i touch the screen to scroll it’s filling the tab icon with tab active colour.Can any one help me with this?

2

I don’t understand your issue from your description.
What exactly is the issue?
How did you add this cusomt icon?
Does it go away when you remove your custom icon?

3

i added custom icons with svg.

ion-icon {
	&[class*="custom-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="custom-icon1"] {
    	mask-image: url(../assets/img/app_offers.svg);
    }
    &[class*="custom-icon2"] {
    	mask-image: url(../assets/img/app_fav.svg);
    }
    &[class*="custom-icon3"] {
    	mask-image: url(../assets/img/app_settings.svg);
    }
}

This is how i added custom ionic icons.These are showing tabs.but the problem is when ever i try to scroll it’s highlighting the custom icon but scrolling is not working.sometimes scrolling works.previously when i don’t have these custom icons it’s working fine now only i am facing the issue after adding these icons.

4

What does that mean exactly?
You have x tabs with these svg icons. The content of the tab is so big that you can scroll it. When you scroll… what happens exactly?

5

i have three tabs with different svgs.I have the more content in each tabs to scroll down.When ever i try to scroll it’s not identifying touch properly.it’s highlighting the icon with the active colour i have given for tabs

6

Again, I don’t understand that.