ionic-team / ionic-v1

The repo for Ionic 1.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
192 stars 187 forks source link

ionic action sheet not working on ios 8.3 version #282

Open jgw96 opened 7 years ago

jgw96 commented 7 years ago

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#12334

jgw96 commented 7 years ago

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

jgw96 commented 7 years ago

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 commented 7 years ago

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