iOS 6.1 / 7 - Cordova 3.1.0 + AngularJS - App crash on click/scroll into HTML/CSS View with [NSCFSet opacity]: unrecognized selector sent to instance

Question

We are seeing this strange bug that I can't find anything on the web yet. There is only one post with no answer or workaround: https://groups.google.com/forum/#!topic/phonegap/7pRzASZpnQc

We built an app with Angular, Underscore, angular-route, angular-touch, angular-animate, CSS Flex layouts and Cordova 3.1.0, and on Android 4.0++ everything works like a charm.

When we moved to iOS onto a Mac and added the iOS platform, we compiled in XCode5 and the app crashes on some of the HTML views (not all) when we click or try to scroll in the iPhone simulators for 6.1 and 7 with this call stack:

2013-11-12 17:22:49.193 App[7034:907] -[__NSCFSet opacity]: unrecognized selector sent to instance 0x98e8660
2013-11-12 17:22:49.194 App[7034:907] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSCFSet opacity]: unrecognized selector sent to instance 0x98e8660'
*** First throw call stack:
(0x119012 0x1f44e7e 0x1a44bd 0x108bbc 0x10894e 0x39e458 0x3c7d7d 0x3b2574 0x3b6a97 0x61f85a 0x61e99b 0x6200df 0x622d2d 0x622cac 0x61aa28 0x387972 0x387e53 0x365d4a 0x357698 0x30b1df9 0x30b1ad0 0x8ebf5 0x8e962 0xbfbb6 0xbef44 0xbee1b 0x30b07e3 0x30b0668 0x354ffc 0x2308c 0x2301d)
libc++abi.dylib: terminate called throwing an exception

The views this is happening on are basically just plain HTML and CSS AngularJS views with some data being set in the controller using the $scope.

Did anyone ever see anything like that? Are there any problems with Alpha, Opacity or CSS or so known?

On iOS 6.1 one of the two views is working whereas on iOS 7 two views are crashing the app.

Calls:

UIView (Rendering) alpha)
UIScrollView _adjustScrollerInicatorsShowingThem:
UIScrollView _updatePanGesture
UIScrollView handlePan
UIGestureRecognizerSendActions
UIGestureRecognizer _updateGestureWithEvent:buttonEvent
UIGestureRecognizer _delayedUpdateGesture
.....
....
UIWindows sendEvent
UIApplicationEvenQueue
__CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM ....
...
....
......
........
GSEventRun
UIApplicationMain
main

Answer 1

Unbelievable but true, it was a CSS problem. Even with iOS7, CSS calculations and parsing is buggy and crashes the browser and the WebView - on all Android phones this worked totally fine!:

HTML:

<div class="financial profileBlock">

We have the following CSS:

#profileContainer .profileBlock table td {
    border-bottom: 1px solid #d2d2d2;
}

#profileContainer .profileBlock table {
    font-size: 1.1em;
    border-top: 1px solid #d2d2d2;
    margin-top: 10px;
}

this crashed the WebView when clicking/touching/tabing or trying to scroll and as a result the whole hybrid App. It also crashed the Safari when accessing the HTML page using a URL!

When we refactored the CSS to the following and it worked:

#profileContainer table.profileTable {
    margin-top: 10px;
    font-size: 0.9em;

    td {
        border-bottom: 1px solid #d2d2d2;

        &:first-child {
            border-top: 1px solid #d2d2d2;
        }
    }
}

Answer 2

This is by no means a proposition for an answer, nor nobody need to upvote me, because I have got all the needed from the @christianmenkens. Thanks a lot Chris!

This is only an additional example what I have experienced, and there is too little space in comments. As this is quite a problem that I would never guessed, like Christian has said.

My problem was in scrolling div. I had a CSS:

.content-wrapper{
  width: 100%;
  height: 100%; /*This was causing the problem.*/
  overflow: auto;
  position: absolute;
  overflow-x:hidden !important;
  padding: 15px 20px 50px 20px;
} 

And I have changed it to:

.content-wrapper{
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 15px 20px 50px 20px;
}