YUI 3

Ticket #2531840 (accepted defect)

Reporter


John Mizliso 		Opened: 03/4/12
Last modified: 03/15/13
Status: accepted
Type: defect

Owner


Derek Gathright 		Target Release: BACKLOG
Priority: P3 (normal)
Summary: ScrollView ScrollBar broken
Description:

The scrollbar indicator for ScrollView is broken with a gap between .yui3-scrollview-middle and .yui3-scrollview-last.

The scrollbar also seems to be skewed towards the left.

In Firefox 10, I am seeing both the skewing and the gap in the scroll bar.

In IE9, I am only seeing the skewing.

Have not tested on other versions.
Type: defect Observed in Version: 3.5.0pr2
Component: ScrollView Severity: S3 (normal)
Assigned To: Derek Gathright Target Release: BACKLOG
Location: Library Code Priority: P3 (normal)
Tags: scrollview Relates To:
Browsers: Firefox - Latest,IE 10.x,Chrome
URL:
Test Information: 

<!DOCTYPE html>

<html>

    <head>

        <title>test</title>

        <link charset="utf-8" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css" rel="stylesheet">

        <style>

            .container {

              width: 985px;

              margin: 0 auto;

              overflow: hidden;

              *zoom: 1;

            }

            

            #menu-container {

              position: fixed;

              width: 1023px;

              height: 250px;

              margin-left: -6px;

              top: 28px;

              border: red 1px solid;

              padding-left: 15px;

            }

            

            #menu {

              overflow-x: scroll;

              white-space: nowrap;

              width: 970px;

              height: 240px;

            }

            

            #menu div {

              width: 159.565px !important;

              margin-top: 10px;

              height: 130px;

              display: inline-block;

              padding: 10px 15px;

            }

            

            .yui3-scrollview-first{

                background-color: red;

            }

            

            .yui3-scrollview-middle{

                background-color: blue;

            }

            

            .yui3-scrollview-last{

                background-color: green;

            }

        </style>

        <script src="http://yui.yahooapis.com/3.5.0pr2/build/yui/yui-min.js"></script>

    </head>

<body>



<div class="container">

        <div id="menu-container">

        <div id="menu">

            <div>

            <h2>Some Module</h2>

            <ul>

                <li>test1</li>

                <li>test2</li>

                <li>test3</li>

                <li>test4</li>

            </ul>

            </div>

            <div>

            <h2>Some Module</h2>

            <ul>

                <li>test1</li>

                <li>test2</li>

                <li>test3</li>

                <li>test4</li>

            </ul>

            </div>

            <div>

            <h2>Some Module</h2>

            <ul>

                <li>test1</li>

                <li>test2</li>

                <li>test3</li>

                <li>test4</li>

            </ul>

            </div>

            <div>

            <h2>Some Module</h2>

            <ul>

                <li>test1</li>

                <li>test2</li>

                <li>test3</li>

                <li>test4</li>

            </ul>

            </div>

            <div>

            <h2>Some Module</h2>

            <ul>

                <li><a href="http://google.com" target="_blank"> test</a></li>

                <li>test2</li>

                <li>test3</li>

                <li>test4</li>

            </ul>

            </div>

            <div>

            <h2>Some Module</h2>

            <ul>

                <li>test1</li>

                <li>test2</li>

                <li>test3</li>

                <li>test4</li>

            </ul>

            </div>

            <div>

            <h2>Some Module</h2>

            <ul>

                <li>test1</li>

                <li>test2</li>

                <li>test3</li>

                <li>test4</li>

            </ul>

            </div>

            <div>

            <h2>Some Module</h2>

            <ul>

                <li>test1</li>

                <li>test2</li>

                <li>test3</li>

                <li>test4</li>

            </ul>

            </div>

            <div>

            <h2>Some Module</h2>

            <ul>

                <li>test1</li>

                <li>test2</li>

                <li>test3</li>

                <li>test4</li>

            </ul>

            </div>            

        </div>

        </div>

    </div>

    

    <script>

    YUI().use('scrollview', 'scrollview-paginator', "scrollview-scrollbars", function (Y) {

        

                Y.one('#menu').setStyle('overflow', 'visible'); //Remove overflow for no-js browsers

                

                var scrollview = new Y.ScrollView({

                    id: "scrollview",

                    srcNode : '#menu',

                    width: 970,

                });

                

                scrollview.plug(Y.Plugin.ScrollViewPaginator, {

                    selector: 'div'

                });



scrollview.render();

    });

    </script>



</body>

</html>

Change History

John Mizliso
Posted: 03/4/12

There was a mistake regarding IE9. In IE9, everything works fine and there is no skewing.

In Firefox 10, we are seeing the skewing and gap in the scrollbar.

John Mizliso
Posted: 03/4/12

The same issue also occurs in Chrome 17 and Safari 5.1.2 (windows).

John Mizliso
Posted: 03/4/12
  • browser changed from Firefox - Latest,IE 9.x to Firefox - Latest,Chrome

Derek Gathright

YUI Developer
Posted: 03/5/12
  • priority changed to P3 (normal)
  • status changed from new to accepted

Here's a Fiddle with John's code. http://jsfiddle.net/3xcfz/

And a screenshot highlighting the issue. http://s89997654.onlinehome.us/screencaps/skitched-20120305-000021.jpg

Derek Gathright

YUI Developer
Posted: 07/21/12
  • location changed to Library Code
  • milestone changed to 3.7.0

Derek Gathright

YUI Developer
Posted: 07/21/12
  • sprint changed to backlog

Jenny Donnelly

YUI Developer
Posted: 08/1/12
  • milestone changed from 3.7.0 to 3.6.x

Moving 3.7.0 bugs to 3.6.x for triage.

Jenny Donnelly

YUI Developer
Posted: 09/19/12
  • milestone changed from 3.6.x to 3.CURRENT.NEXT

Moving from 3.6.x to 3.CURRENT.NEXT

Derek Gathright

YUI Developer
Posted: 09/24/12
  • milestone changed from 3.CURRENT.NEXT to 3.NEXT

F21

YUI Contributor
Posted: 03/11/13
  • browser changed from Firefox - Latest,Chrome to Firefox - Latest,IE 10.x,Chrome

F21

YUI Contributor
Posted: 03/11/13

The problem also occurs in IE10.

F21

YUI Contributor
Posted: 03/11/13

See http://yuilibrary.com/yui/docs/scrollview/scrollview-example.html

<img src="http://i.imgur.com/7W43slI.png">

Derek Gathright

YUI Developer
Posted: 03/15/13
  • milestone changed from 3.NEXT to BACKLOG

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info