Action sheet button shortens when highlighted

[aparajita]

Short description of the problem:

In iOS look, when an action sheet button is in the highlighted state, it shortens by 1 or 2 px.

What behavior are you expecting?

The button should remain the same height when highlighted.

Steps to reproduce:

1. Go to http://ionicframework.com/docs/v2/components/#action-sheets
2. Click on "Show Action Sheet"
3. Click and hold down on the "Delete" button in the action sheet. When the button is highlighted, it shortens.
4. While still holding the mouse button down, move off the "Delete" button. When the button highlight is removed, the button goes back to its original height.

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Obviously seems to be a CSS issue. Doesn't occur in the other UI types (Android, Windows).

Which Ionic Version? 1.x or 2.x

2.x

Run ionic info from terminal/cmd prompt: (paste output below)

Using the version on your web site.

[jgw96]

Hello! Thanks for opening an issue with us! I think this might be because the borders get removed when the button is :active on the ios theme. On android and windows there are no borders on the buttons in the action sheet, so this is why they don't look shorter when active on those platforms.

[aparajita]

That may be why it's happening, but it's clearly undesirable behavior. Why remove the border? It could just be changed to the highlight color.

[bensperry]

@aparajita This is what iOS native action sheet does. We are simply mimicking the native experience for action sheet.

[brandyscarney]

I'm not seeing this at all. Before clicking the height of the button is 57px:

with the activated class it is 58px but it has margin-top: -1px so it really appears as 57px:

Putting them side by side:

I'm going to close this issue because I don't see anything wrong with it, please let me know if we're misunderstanding you. 😄

[aparajita]

There must be something wrong with the demo then, because I'm getting wrong behavior there. Alternate between these two screen shots, you can clearly see it move:

[manucorporat]

@brandyscarney I confirm this is a real issue. I created the PR for the improved action-sheet css and something is broken for safari in the last version.

Please reopen, I think I know what is going on.

[manucorporat]

I have a fix!

[manucorporat]

@brandyscarney @bensperry in safari the buttons have a non 0 margin (not sure why) this normalizes how the buttons are rendered in safari and chrome.

the change does not affect how it looks in my chrome.

#5867

but please, merge it locally and verify it fixes it

[brandyscarney]

Thanks for the PR @manucorporat. We were looking in Chrome so that explains it! I'll take a look at it soon. 😄

[aparajita]

@brandyscarney Sorry for not stating that it was in Safari at the beginning. I should have checked on Chrome myself.

[brandyscarney]

@aparajita It's fine! We really should be testing Safari more. Thanks for finding and reporting it! 😄

[brandyscarney]

I merged the PR from @manucorporat. This will be fixed on the site once we release beta.4 and update the demos.

Thanks again, everyone!