I have tabs in a card list, in a content, in a nav-view, with a menu. Similar to this
When I test using ripple using the iPhone 5 device size I get this:
Notice there is no divider line between the main content and the tabs, as well as the shadow of the card is missing. This also happens when I test using iPhone 4/4s and iPad 3. Also, I’ve noticed this on the Nexus 4 setting as well.
If I change the device to iPhone 3G/3Gs or iPad (or one of the many other devices…though I haven’t checked all of them) it seems to work fine:
So it seems to effect the devices that are retina/high dpi.
Also, another weird thing is that if I change how I load the ionic.css from
<link href="bower_components/ionic/release/css/ionic.css" rel="stylesheet"> to
<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet">
(in other words, load it from the web instead of locally) it also works fine. I have compared the two css files and they are identical (I have 1.0.0-beta.6 installed via bower) so I don’t know what the difference could be.
I don’t know if this is a ripple issue, or an issue with the ionic css. I currently can’t test on a real device, so I don’t know if these issues are present on an actual device.
Has anyone seen this issue before? Is it an issue with ripple and it goes away on a real device? Why does it work fine when I load the css from the web even though the files are identical? So many questions!
