Attachment 239049 Details for Bug 137313 – Example html file which demonstrates the issue.

Example html file which demonstrates the issue.

index.html (text/html), 2.95 KB, created by Ted Tate on 2014-10-01 14:17:20 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Ted Tate

Created: 2014-10-01 14:17:20 PDT

Size: 2.95 KB

patch

obsolete

><!DOCTYPE html>
><html>
>    <head>
>        <title></title>
>        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
>        <style>
>            .container  {
>                position:  relative;
>                overflow:  hidden;
>            }
>
>            .inner {
>                position:  relative;
>                white-space:  nowrap;
>                text-align:  left;
>
>
>                -webkit-transition-property:  -webkit-transform;
>                -moz-transition-property:  -moz-transform;
>                -ms-transition-property:  -ms-transform;
>                -o-transition-property:  -o-transform;
>                transition-property:  transform;
>            }
>
>            .item {
>                display: inline-block;
>                width: 100%;
>                vertical-align:  top;
>            }
>        </style>
>    </head>
>    <body>
>
>        <h2>Previous / Next controls</h2>
>        <p>Carousel with Previous / Next controls to advance between items.</p>
>        <div class="container">
>          <div class="inner">
>            <div class="item">
>                <img src="http://lorempixel.com/300/300/cats/?1">
>            </div>
>            <div class="item">
>                <img src="http://lorempixel.com/300/300/cats/?2">
>            </div>
>            <div class="item">
>                <img src="http://lorempixel.com/300/300/cats/?3">
>            </div>
>            <div class="item">
>                <img src="http://lorempixel.com/300/300/cats/?4">
>            </div>
>            <div class="item">
>                <img src="http://lorempixel.com/300/300/cats/?5">
>            </div>
>          </div>
>        </div>
>
>        <div class="controls">
>            <button class="apply-translate">Apply translate3d(-900px, 0px, 0px) to .inner</button>
>            <button class="trigger-fix">Enable fix</button>
>            <p>
>                <span>Number of touchmoves fired on '.inner':</span>
>                <span class="touchmove-counter">0</span>
>            </p>
>        </div>
>
>         <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
>        <script>
>            var container = $('.container');
>            var inner = $('.inner');
>            var items = $('.item');
>            var applyTranslate = $('.apply-translate');
>            var triggerFix = $('.trigger-fix');
>            var counter = $('.touchmove-counter');
>            var count = 0;
>
>            inner.on('touchmove', function(e) {
>                count += 1;
>                counter.html(count);
>            });
>
>            triggerFix.on('click', function(e) {
>                items.on('touchmove', function(e) {
>                    return true;
>                });
>            });
>
>            applyTranslate.on('click', function(e) {
>                var cssProp = '-webkit-transform: translate3d(-900px, 0px, 0px)';
>                $('.inner').attr('style', cssProp);
>            });
>        </script>
>    </body>
></html>

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <style>
            .container  {
                position:  relative;
                overflow:  hidden;
            }

            .inner {
                position:  relative;
                white-space:  nowrap;
                text-align:  left;


                -webkit-transition-property:  -webkit-transform;
                -moz-transition-property:  -moz-transform;
                -ms-transition-property:  -ms-transform;
                -o-transition-property:  -o-transform;
                transition-property:  transform;
            }

            .item {
                display: inline-block;
                width: 100%;
                vertical-align:  top;
            }
        </style>
    </head>
    <body>

        <h2>Previous / Next controls</h2>
        <p>Carousel with Previous / Next controls to advance between items.</p>
        <div class="container">
          <div class="inner">
            <div class="item">
                <img src="http://lorempixel.com/300/300/cats/?1">
            </div>
            <div class="item">
                <img src="http://lorempixel.com/300/300/cats/?2">
            </div>
            <div class="item">
                <img src="http://lorempixel.com/300/300/cats/?3">
            </div>
            <div class="item">
                <img src="http://lorempixel.com/300/300/cats/?4">
            </div>
            <div class="item">
                <img src="http://lorempixel.com/300/300/cats/?5">
            </div>
          </div>
        </div>

        <div class="controls">
            <button class="apply-translate">Apply translate3d(-900px, 0px, 0px) to .inner</button>
            <button class="trigger-fix">Enable fix</button>
            <p>
                <span>Number of touchmoves fired on '.inner':</span>
                <span class="touchmove-counter">0</span>
            </p>
        </div>

         <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            var container = $('.container');
            var inner = $('.inner');
            var items = $('.item');
            var applyTranslate = $('.apply-translate');
            var triggerFix = $('.trigger-fix');
            var counter = $('.touchmove-counter');
            var count = 0;

            inner.on('touchmove', function(e) {
                count += 1;
                counter.html(count);
            });

            triggerFix.on('click', function(e) {
                items.on('touchmove', function(e) {
                    return true;
                });
            });

            applyTranslate.on('click', function(e) {
                var cssProp = '-webkit-transform: translate3d(-900px, 0px, 0px)';
                $('.inner').attr('style', cssProp);
            });
        </script>
    </body>
</html>

Actions: View

Attachments on bug 137313: 239049