It seems to be because of an issue with blink/webkit browsers.

Not entirely sure why, but I can replicate it easily enough. It must be how their engines handle rendering.

But basically it makes this plugin practically unusable.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>

    <style type="text/css" media="screen">
        body {
            height: 1000px;
            background: grey;
        }
        .header {
            background: red;
            width: 43%;
            height: 50px;
            z-index: 2;
            left: 0;
            right: 0;
            margin: 0 auto;
        }
        .table {
            background: white;
            height: 300px;
            width: 45%;
            margin: 0 auto;
            margin-top: 300px;
        }
    </style>

</head>
<body>

    <div class="table func__table"></div>
    <div class="header func__header"></div>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script type="text/javascript" charset="utf-8">

        $(document).ready(function(){

            function setPosition() {
                toTop = $('.func__table')[0].getBoundingClientRect().top
                $('.func__header').css('top', toTop+'px')
            }

            $header = $('.func__header')
            $header.css('position', 'fixed')
            setPosition()
            $(window).on('scroll', setPosition);

        });

    </script>

</body>
</html>

thead is like flickering when scrolling #107

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions