Alpha release 40 Material Ripple Effects Disappear


#1

Hey @brandyshea,

Sorry to bother you again but when i update to alpha version 40 all the material affects has gone not sure what happened it was working fine when i was on version 37 ?

Thanks

Tariq Siddiqui


#2

Which effects? The ripple, or all of the styling? I have the conference app updated to alpha 40 (locally) and I am able to see the Material Design styles. Are you getting any errors where ionic serve is running, or is this on a device?


#3

ink drop / ripple effect not displaying on both ionic serve and device, but its working on version 39, here’s my system information. And i found no errors in console windows as well.

Cordova CLI: 5.4.0
Ionic Version: 2.0.0-alpha.39
Ionic CLI Version: 2.0.0-alpha.25
Ionic App Lib Version: 2.0.0-alpha.24
ios-deploy version: Not installed
ios-sim version: 5.0.3
OS: Mac OS X Yosemite
Node Version: v5.1.0
Xcode version: Xcode 7.2 Build version 7C68


#4

What version of Android is it? We have ripple disabled for Android versions below 5.0 currently.

https://github.com/driftyco/ionic2/blob/master/ionic/platform/registry.ts#L62


#5

M testing on Android version 5, but i m facing this on ionic serve as well. Point to note is version 39 is displaying the effects. And my client is also facing the same issue on his device Samsung S5.


#6

If you add this config to your @App does it make it work:


@App({
  templateUrl: 'app.html',
  config: {
    platforms: {
      android: {
        activator: 'ripple'        
      }
    }
  }
})

#7

Awesome it worked, thanks @brandyshea :+1:


#8

Yeah, so that is related to us specifying which versions it should work on. Could you create an issue with info of all of the devices it doesn’t work on? If it was on an Android running version 5 it should be working.


#9

OK i’ll create the issue but @brandyshea what about when testing on browser with ionic serve, if i remove the code you mentioned should it be a problem ?


#10

If you’re viewing it in the browser it has the iOS mode by default. If you’re using Chrome emulation some of the Android devices have versions lower than 5. An example of an emulator using major version 5 is the Nexus 6. The Nexus 5 uses major version 4 and therefore the ripple won’t show. You can check this by pasting the following in the console:

console.log(navigator.userAgent);

The Nexus 5 displays this:

Mozilla/5.0 (Linux; Android 4.4.4; Nexus 5 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.114 Mobile Safari/537.36

The Nexus 6 displays this:

Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.20 Mobile Safari/537.36

Note: I am using Chrome Version 47.0.2526.80 on Mac Yosemite 10.10.5 so you could have different results.

To answer your question, if you remove the code I mentioned it will only work for devices running Android major version 5 and up, including emulators.


#11

Hi @brandyshea !

I add activator: 'ripple' but it doesn’t work

Cordova CLI: 6.5.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.6
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.10.0
Xcode version: Not installed

And I’m trying it in a Samsung Grand Prime (Android 4.4) I know that it’s the problem, but with activator: 'ripple' it has to work? Do you know any workaround?

Sorry for my english!

Thanks!