Hardware Acceleration on Web Application Memory Leak

Question

I have been building web applications using PhoneGap/Cordova and have been working well.

The apps consist of a series of slides, that the user can swipe to get to the next slide. I have been using the idangero swiper to accomplish this.

Once I tried to scale my apps to contain more slides, the apps crash with a memory warning on XCODE. I narrowed it down to the hardware acceleration in CSS3 (below). The MAX number of slides I can have without it crashing is 22. Once I add a 23rd, I get the memory warning and crash.

I narrowed it down even further to

.swiper-slide {
    background-color: #fff;

    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0,0,0);
  }

When I remove the two webkit-transforms from the css below, the app compiles and runs, but there is the white screen blink on the first page, and simple dropdown animation like slideToggle get jittery.

idangero css

.swiper-container {
    margin:0 auto;
    position:relative;
    overflow:hidden;
    height: 768px;
    width: 1024px;
    z-index:1;

}

.swiper-slide {
    background-color: #fff;

    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0,0,0);
  }

.swiper-wrapper {
    position:absolute;
    width: 100%;
    -webkit-transition-property:-webkit-transform, left, top;
    -webkit-transition-duration:0s;
    -webkit-transition-timing-function:ease;

    -moz-transition-property:-moz-transform, left, top;
    -moz-transition-duration:0s;
    -moz-transform:translate3d(0px,0,0);
    -moz-transition-timing-function:ease;

    -o-transition-property:-o-transform, left, top;
    -o-transition-duration:0s;
    -o-transform:translate3d(0px,0,0);
    -o-transition-timing-function:ease;
    -o-transform:translate(0px,0px);

    -ms-transition-property:-ms-transform, left, top;
    -ms-transition-duration:0s;
    -ms-transform:translate3d(0px,0,0);
    -ms-transition-timing-function:ease;

    transition-property:transform, left, top;
    transition-duration:0s;
    transform:translate3d(0px,0,0);
    transition-timing-function:ease;


    transform: translate3d(0%,0,0) scale3d(1,1,1);
    -o-transform: translate3d(0%,0,0) scale3d(1,1,1);
    -ms-transform: translate3d(0%,0,0) scale3d(1,1,1);
    -moz-transform: translate3d(0%,0,0) scale3d(1,1,1);
    -webkit-transform: translate3d(0%,0,0) scale3d(1,1,1);
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;


}

.swiper-free-mode > .swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto;

}
.swiper-slide {
    float: left;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
    -ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
    -ms-touch-action: pan-x;
}

example html for 2 "slides"

<div class="swiper-container">
            <div class="swiper-wrapper">

                <!-- Home (Page 1) = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -->
                <div id="home" class="swiper-slide" rel="bkg-home.jpg">
                    <div class="page">
                        <h1>TEXt HErE</h1>   
                        <h3>Header 3</h3>
                    </div><!-- /page -->
                </div><!-- /home -->

                <!-- Page 2 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  -->
                <div id="p2" class="swiper-slide" rel="bkg-2.jpg">
                    <div class="page">
                        <div class="menu-trigger"></div>
                        <h1 style="padding-top:17px;">MORE TITLES</h1> 
                        <div class="content">
                            <div id="table-of-contents">
                                <ul>
                                     <li><a href="#p3">Issue Overview </a></li>
                                     <li><a href="#p4">Content1</a></li>
                                     <li><a href="#p6">Content2</a></li>
                                     <li><a href="#p30">Content3</a></li>
                                     <li><a href="#p17">Content4</a></li>
            </ul>
                                </ul>
                            </div><!-- /table-of-contents -->

                        </div><!-- /content -->
                        <div class="header"></div><!-- /header -->
                        <div class="footer"></div><!-- /footer -->
                        <div class="footer-segment"></div><!-- /footer-segment -->
                    </div><!-- /page -->
                </div><!-- /p2 -->
       </div>
</div>

So it seems I need that hardware accelerating CSS3 in order for the app to run smoothly but it also seems that it causes the crash. Does anyone have a work around code that will allow my apps to work smoothly but not cause the whole app to crash?

Answer 1

I'd try two different things.

1 will-change

Supposedly the future of hardware acceleration is the new will-change css attribute.

https://dev.opera.com/articles/css-will-change-property/

.swiper-slide {
  background-color: #fff;
  -webkit-transform-style: preserve-3d;
  /* -webkit-transform: translate3d(0,0,0); */
  will-change: transform, top, left;
}

2 transforms are cheaper than positioning with top and left

I can't tell where exactly you are using the transition on top and left, but I'd try to replace top/left with translateX(), translateY() or translate().