mvaled/is_this_a_bug.html

## is_this_a_bug.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>FF 15.0.1 Bug?</title>
    <meta name="description" content="Shows a bug if FF 15.0.1" />
    <meta name="author" content="Manuel Vazquez Acosta" />

    <meta name="viewport" content="width=device-width; initial-scale=1.0" />

    <style>
        /* Make the container visible */
        .container {
            width: 500px;
            height: 400px;
            position: relative; /* make it a viewport for abs positioned elems */
            border: 1px solid #00f;
        }
        /* Make the sliding-tabs container visible */
        .sliding-tabs {
            display: block;
            width: 300px;
            height: 400px;
            border: 1px solid #f00;
            position: absolute;
            right: 0;
        }

        .tab-content {
            position: absolute;
            right: 0;
            /* If overflow is not hidden the bug does not shows */
            overflow: hidden;
            border: 1px dashed #0f0;
            width: 90%;
            height: 100%;
        }

        .tab-pane, .tab-pane:focus, .tab-pane:active {
            display: block;
            background-color: #ccc;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .tab-pane.l {
          -moz-transition: left 0.4s ease-in-out;
          transition: left 0.4s ease-in-out;

          left: 100%;
        }

    </style>
  </head>

  <body>
    <div class="container">
      <div class="sliding-tabs">
        <div class="tab-content">
          <div class="tab-pane l" id="00">
            Tab Pane 00
          </div>

          <div class="tab-pane l" id="01">
            Tab Pane 01
          </div>
        </div>
      </div>
    </div>

    <button>Show scrolling</button>
    <pre id="console">

    </pre>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script>
      function log() {
        var __slice = Array.prototype.slice;
        var a = __slice.call(arguments, 0);
        var msg = a.join('')
        var $console =  $("#console");
        var t = $console.text();
        if (t) {
          t += '\n';
        }
        t += msg;
        $console.text(t);
        console && console.debug && console.debug(msg);
      }

      function reset(event){
        var scroll = $(".tab-content").scrollLeft();
        log('scrolled to ', scroll);
        $(".tab-content").scrollLeft(0);
      }

      $(function($) {$("button").click(reset);});
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>FF 15.0.1 Bug?</title>
	<meta name="description" content="Shows a bug if FF 15.0.1" />
	<meta name="author" content="Manuel Vazquez Acosta" />

	<meta name="viewport" content="width=device-width; initial-scale=1.0" />

	<style>
	/* Make the container visible */
	.container {
	width: 500px;
	height: 400px;
	position: relative; /* make it a viewport for abs positioned elems */
	border: 1px solid #00f;
	}
	/* Make the sliding-tabs container visible */
	.sliding-tabs {
	display: block;
	width: 300px;
	height: 400px;
	border: 1px solid #f00;
	position: absolute;
	right: 0;
	}

	.tab-content {
	position: absolute;
	right: 0;
	/* If overflow is not hidden the bug does not shows */
	overflow: hidden;
	border: 1px dashed #0f0;
	width: 90%;
	height: 100%;
	}

	.tab-pane, .tab-pane:focus, .tab-pane:active {
	display: block;
	background-color: #ccc;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	position: absolute;
	}
	.tab-pane.l {
	-moz-transition: left 0.4s ease-in-out;
	transition: left 0.4s ease-in-out;

	left: 100%;
	}

	</style>
	</head>

	<body>
	<div class="container">
	<div class="sliding-tabs">
	<div class="tab-content">
	<div class="tab-pane l" id="00">
	Tab Pane 00
	</div>

	<div class="tab-pane l" id="01">
	Tab Pane 01
	</div>
	</div>
	</div>
	</div>

	<button>Show scrolling</button>
	<pre id="console">

	</pre>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	<script>
	function log() {
	var __slice = Array.prototype.slice;
	var a = __slice.call(arguments, 0);
	var msg = a.join('')
	var $console = $("#console");
	var t = $console.text();
	if (t) {
	t += '\n';
	}
	t += msg;
	$console.text(t);
	console && console.debug && console.debug(msg);
	}

	function reset(event){
	var scroll = $(".tab-content").scrollLeft();
	log('scrolled to ', scroll);
	$(".tab-content").scrollLeft(0);
	}

	$(function($) {$("button").click(reset);});
	</script>
	</body>
	</html>