Weird CSS issue


#1

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!


#2

This is probably a ripple issue, as we test on many devices to be sure. Not too sure why loading from our cdn resolves the issue.

Do you have any other emulators you could try?


#3

I tried on an android virtual device and it happens there too:

Here are my AVD settings:


#4

I redid the UI to use an action sheet for the controls in the tabs, so this isn’t a problem for me anymore, but I think there is still an issue here.