Блог

Привет, я использую Jquery Scrollify (кстати, довольно круто) для набора карточек, повторяющихся через ng-повтор с использованием AngularJS. Привязка и прокрутка отлично работают на всех картах, кроме двух, содержащих столбчатые диаграммы Highcharts. Изначально я предполагал, что проблема будет в «positive: relative», но даже изменение положения на static или initial не помогло. Я что-то здесь упускаю?

HTML:

             <div class="card awareness" ng-if="card['awareness-bar']">

                <div class="row">
                    <div class="col-xs-12">
                        <p>You've spent a little more<br>at Text this month.</p>
                    </div>
                </div>


                <div class="row">
                    <div class="col-xs-12">
                        <div id="awareness_bar" style="width: 80%; height:100%; margin: 0 auto"></div>
                    </div>
                </div>


            </div>
  

Прокручивать:

     $(function() {
        $.scrollify({
            section : ".card",
            sectionName: false,
            setHeights: false,
            offset: -50,
            interstitialSection : ".flow-header"
        });
    });
  

CSS:

 .card {
        background: rgba(117, 117, 117, 0.3);
        padding: 14px 11px;
        text-align: center;
        margin-top: 15px;
        box-shadow: 0 2px 3px rgb(65, 64, 66);
    }
  .awareness {

        background-color: rgba(33, 155, 213, 1);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgba(33, 155, 213, 1), endColorstr=rgba(83, 160, 253, 1));
        background-image: -moz-linear-gradient(top, rgba(33, 155, 213, 1) 0%, rgba(83, 160, 253, 1) 25%, rgba(81, 183, 236, 1) 100%);
        background-image: linear-gradient(top, rgba(33, 155, 213, 1) 0%, rgba(83, 160, 253, 1) 25%, rgba(81, 183, 236, 1) 100%);
        background-image: -webkit-linear-gradient(top, rgba(33, 155, 213, 1) 0%, rgba(83, 160, 253, 1) 25%, rgba(81, 183, 236, 1) 100%);
        background-image: -o-linear-gradient(top, rgba(33, 155, 213, 1) 0%, rgba(83, 160, 253, 1) 25%, rgba(81, 183, 236, 1) 100%);
        background-image: -ms-linear-gradient(top, rgba(33, 155, 213, 1) 0%, rgba(83, 160, 253, 1) 25%, rgba(81, 183, 236, 1) 100%);
        background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, rgba(33, 155, 213, 1)), color-stop(25%, rgba(83, 160, 253, 1)), color-stop(100%, rgba(81, 183, 236, 1)));
        padding-bottom: 40px;
        padding-top: 50px;

        p {
            color: #fff;
            font-size: 24px;
        }

    }