Skip to content
This repository has been archived by the owner on May 4, 2022. It is now read-only.

ionic action sheet not working on ios 8.3 version #282

Open
jgw96 opened this issue Jul 17, 2017 · 3 comments
Open

ionic action sheet not working on ios 8.3 version #282

jgw96 opened this issue Jul 17, 2017 · 3 comments

Comments

@jgw96
Copy link
Contributor

jgw96 commented Jul 17, 2017

From @karthikrajender on July 12, 2017 13:23

Ionic action sheet is not opening in IOS 8.3 version, but it is working in IOS 9 and 10 versions perfectly. is there any css fix available i need to add to fix the issue.

Copied from original issue: ionic-team/ionic-framework#12334

@jgw96
Copy link
Contributor Author

jgw96 commented Jul 17, 2017

Hello, thanks for opening an issue with us! Could you fill out the issue template please?

@jgw96
Copy link
Contributor Author

jgw96 commented Jul 17, 2017

From @karthikrajender on July 14, 2017 4:45

ionic version: 1.1.1
cordova: 6.x

ionic action sheet css:

.action-sheet-backdrop {
transition: background-color 150ms ease-in-out;
position: fixed;
top: 0;
left: 0;
z-index: 11;
width: 100%;
height: 100%;
background-color: transparent;
}
/* line 16, ../../app/bower_components/ionic/scss/_action-sheet.scss */
.action-sheet-backdrop.active {
background-color: rgba(0, 0, 0, 0.4);
}

/* line 21, ../../app/bower_components/ionic/scss/_action-sheet.scss */
.action-sheet-wrapper {
transform: translate3d(0, 100%, 0);
transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-width: 500px;
margin: auto;
}

/* line 33, ../../app/bower_components/ionic/scss/_action-sheet.scss */
.action-sheet-up {
transform: translate3d(0, 0, 0);
}

/* line 37, ../../app/bower_components/ionic/scss/_action-sheet.scss /
.action-sheet {
margin-left: 8px;
margin-right: 8px;
width: auto;
z-index: 11;
overflow: hidden;
}
/
line 44, ../../app/bower_components/ionic/scss/_action-sheet.scss /
.action-sheet .button {
display: block;
padding: 1px;
width: 100%;
border-radius: 0;
border-color: #d1d3d6;
background-color: transparent;
color: #007aff;
font-size: 21px;
}
/
line 55, ../../app/bower_components/ionic/scss/_action-sheet.scss /
.action-sheet .button:hover {
color: #007aff;
}
/
line 58, ../../app/bower_components/ionic/scss/_action-sheet.scss /
.action-sheet .button.destructive {
color: #ff3b30;
}
/
line 60, ../../app/bower_components/ionic/scss/_action-sheet.scss /
.action-sheet .button.destructive:hover {
color: #ff3b30;
}
/
line 66, ../../app/bower_components/ionic/scss/_action-sheet.scss */
.action-sheet .button.active, .action-sheet .button.activated {
box-shadow: none;
border-color: #d1d3d6;
color: #007aff;
background: #e4e5e7;
}
.action-sheet-has-icons .icon {
position: absolute;
left: 16px;
}

.action-sheet-title {
padding: 16px;
color: #8f8f8f;
text-align: center;
font-size: 13px;
}

.action-sheet-group {
margin-bottom: 8px;
border-radius: 4px;
background-color: #fff;
overflow: hidden;
}
.action-sheet-group .button {
border-width: 1px 0px 0px 0px;
}
.action-sheet-group .button:first-child:last-child {
border-width: 0;
}

.action-sheet-options {
background: #f1f2f3;
}

.action-sheet-cancel .button {
font-weight: 500;
}

.action-sheet-open {
pointer-events: none;
}
.action-sheet-open.modal-open .modal {
pointer-events: none;
}
.action-sheet-open .action-sheet-backdrop {
pointer-events: auto;
}
.platform-android .action-sheet-backdrop.active {
background-color: rgba(0, 0, 0, 0.2);
}
.platform-android .action-sheet {
margin: 0;
}
.platform-android .action-sheet .action-sheet-title,
.platform-android .action-sheet .button {
text-align: left;
border-color: transparent;
font-size: 16px;
color: inherit;
}
.platform-android .action-sheet .action-sheet-title {
font-size: 14px;
padding: 16px;
color: #666;
}
.platform-android .action-sheet .button.active,
.platform-android .action-sheet .button.activated {
background: #e8e8e8;
}
.platform-android .action-sheet-group {
margin: 0;
border-radius: 0;
background-color: #fafafa;
}
.platform-android .action-sheet-cancel {
display: none;
}

.platform-android .action-sheet-has-icons .button {
padding-left: 56px;
}

.backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 11;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
visibility: hidden;
opacity: 0;
transition: 0.1s opacity linear;
}
.backdrop.visible {
visibility: visible;
}
.backdrop.active {
opacity: 1;
}

is there any specific css i need to add for ios platform ? i do minification of css i also check this creates problem

@jgw96
Copy link
Contributor Author

jgw96 commented Jul 17, 2017

Hello! Since this is an Ionic v1 issue I am going to move this to the ionic v1 repo. Thanks.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

1 participant