滚动时，标题中会出现小行

Question

滚动时，我的横幅会模糊。有一个包含网站标题的标题框。滚动时，文本下方会出现小行。当我使用iPad时，这些线条不会出现在桌面上。你可以通过here

看看我的意思

HTML / CSS

<div class="banner-b" style="display: table; width: 100%; position: relative; height: 450px; background: url(http://www.imagesgallerys.com/wp-content/uploads/summer-flowers-1920x1080-wallpaper-5426-jpg-20150520060357-555c23cd5d73c.jpg) center no-repeat; background-size: cover; top: 0; left: 0; right: 0; bottom: 0;">
                <div class="overlay-b" style="position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: url(http://i.imgur.com/TO7ROHx.jpg) center no-repeat; background-size: cover; z-index: 10; opacity: 0;"></div>
                <div class="content-b" style="z-index: 10; text-align: center; position: relative; top: 50%; transform: translateY(-50%); font-size: 50px;">
                    <hgroup style="height: 60px; margin-top: 150px; display: inline-block; vertical-align: middle; text-align: center; position: relative; top: 50%; left: 0%; color: #fff; border: 5px solid #fff; padding: 40px; background-color: rgba(0, 0, 0, .7); z-index: 0;">
                         <h1 style="margin: 0px auto; color: white; text-align: center;">Wolf Valley</h1>

                    </hgroup>

                </div>
            </div>

JavaScript的：

<script>
    var $content = $('header .content-b'),
        $blur = $('header .overlay-b'),
        wHeight = $(window).height();

    $(window).on('resize', function() {
        wHeight = $(window).height();
    });
    window.requestAnimFrame = (function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();
    function Scroller() {
        this.latestKnownScrollY = 0;
        this.ticking = false;
    }

    Scroller.prototype = {
        init: function() {
            window.addEventListener('scroll', this.onScroll.bind(this), false);
        },

        onScroll: function() {
            this.latestKnownScrollY = window.scrollY;
            this.requestTick();
        },

        requestTick: function() {
            if (!this.ticking) {
                window.requestAnimFrame(this.update.bind(this));
            }
            this.ticking = true;
        },

        update: function() {
            var currentScrollY = this.latestKnownScrollY;
            this.ticking = false;

            var slowScroll = currentScrollY / 4,
                blurScroll = currentScrollY * 4;

            $content.css({
                'transform': 'translateY(-' + slowScroll + 'px)',
                    '-moz-transform': 'translateY(-' + slowScroll + 'px)',
                    '-webkit-transform': 'translateY(-' + slowScroll + 'px)'
            });

            $blur.css({
                'opacity': blurScroll / wHeight
            });
        }
    };
    var scroller = new Scroller();
    scroller.init();
</script>