Vert scroll bar for overflow:auto not working in Chrome

HTML & CSS
1

Hello all,

I seem to be having a problem with a vert. scroll bar for a overflow:auto in Chrome.

The site can be seen at: ChuprinaCreative - Great web design, fine photography

In the Firefox browser the tab appears on the right side with a blue tab to scroll, what I expected. In Chrome, to my dismay I have the following issues:

  • The sliding Blue tab is missing.

[LIST]When mousing over the sliding tab bar the bottom of the bar(near coffee cup) disappears.
[/LIST]

Any help, comments and guidance is greatly appreciated.

PChuprina

2

Hi,

It looks like a bug in webkit as Safari is the same as chrome and as noted in this article the scrollbars are there but you just can’t see them. You can scroll with the mouse wheel or you can guess where the scrollbar is and drag and it works.

A small example shows that webkit loses the scrollbar on transformed elements.


.test {
    -webkit-transform:rotate(-1.5deg);
    -moz-transform:rotate(-1.5deg);
    transform:rotate(-1.5deg);
    height:425px;
    width:685px;
    overflow:scroll;
}

There may be a partial solution as webkit allows scrollbar styling and perhaps you could add your won custom scrollbar for webkit.

I copied the code from there example and rotated the object and the scrollbars appear.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/ -->
<style>
body {
    -webkit-user-select: none;
}
body > div {
    padding: 10px;
    margin: 20px;
    display: inline-block;
    border: 1px solid lightgray;
    -webkit-box-sizing: border-box;
    vertical-align: top;
    color: rgb(220, 220, 220);
    background-color: rgb(113, 141, 147);
    font-family: Verdana, sans-serif;
    font-size: 12px;
    -webkit-user-select: text;
    width: 125px;
    height: 100px;
}
 body > div::selection, body > div div::selection {
 background-color: rgb(130, 170, 170);
 color: rgb(235, 235, 235);
}

::-webkit-scrollbar {
 width: 13px;
 height: 13px;
}

::-webkit-scrollbar-corner {
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/corner.png);
 background-repeat: no-repeat;
}

::-webkit-scrollbar-corner:window-inactive {
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/corner-inactive.png);
}

::-webkit-resizer {
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/resizer.png);
 background-repeat: no-repeat;
 background-position: bottom right;
}

::-webkit-resizer:window-inactive {
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/resizer-inactive.png);
}

::-webkit-scrollbar-track-piece:disabled {
 display: none !important;
}

::-webkit-scrollbar-button:disabled {
 display: none !important;
}

::-webkit-scrollbar-track:disabled {
 margin: 6px;
}

/* Horizontal Scrollbar Styles */

::-webkit-scrollbar:horizontal {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button.png) 0 2 0 2;
 border-color: transparent;
 border-width: 0 2px;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-background.png);
 background-repeat: repeat-x;
}

::-webkit-scrollbar:horizontal:corner-present {
 border-right-width: 0;
}

::-webkit-scrollbar-track:horizontal:disabled:corner-present {
 margin-right: 5px;
}

::-webkit-scrollbar:horizontal:window-inactive {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-inactive.png) 0 2 0 2;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-background-inactive.png);
}

::-webkit-scrollbar-thumb:horizontal {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-thumb.png) 0 13 0 13;
 border-color: transparent;
 border-width: 0 13px;
 min-width: 20px;
}

::-webkit-scrollbar-thumb:horizontal:hover {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-thumb-hover.png) 0 13 0 13;
}

::-webkit-scrollbar-thumb:horizontal:active {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-thumb-active.png) 0 13 0 13;
}

::-webkit-scrollbar-thumb:horizontal:window-inactive {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-thumb-inactive.png) 0 13 0 13;
}

::-webkit-scrollbar-track-piece:horizontal:start:no-button, .double-end::-webkit-scrollbar-track-piece:horizontal:start, .none::-webkit-scrollbar-track-piece:horizontal:start {
 margin-left: 6px;
}

::-webkit-scrollbar-track-piece:horizontal:end:no-button, .double-start::-webkit-scrollbar-track-piece:horizontal:end, .none::-webkit-scrollbar-track-piece:horizontal:end {
 margin-right: 6px;
}

::-webkit-scrollbar-track-piece:horizontal:end:no-button:corner-present, .double-start::-webkit-scrollbar-track-piece:horizontal:end:corner-present, .none::-webkit-scrollbar-track-piece:horizontal:end:corner-present {
 margin-right: 5px;
}

:not(.none):not(.double-end)::-webkit-scrollbar-track-piece:horizontal:start:single-button, :not(.none):not(.double-end)::-webkit-scrollbar-track-piece:horizontal:start:double-button, .single::-webkit-scrollbar-track-piece:horizontal:start, .double-start::-webkit-scrollbar-track-piece:horizontal:start, .double-both::-webkit-scrollbar-track-piece:horizontal:start {
 margin-left: -6px;
}

:not(.none):not(.double-start)::-webkit-scrollbar-track-piece:horizontal:end:single-button, :not(.none):not(.double-start)::-webkit-scrollbar-track-piece:horizontal:end:double-button, .single::-webkit-scrollbar-track-piece:horizontal:end, .double-end::-webkit-scrollbar-track-piece:horizontal:end, .double-both::-webkit-scrollbar-track-piece:horizontal:end {
 margin-right: -6px;
}

::-webkit-scrollbar-track:horizontal:disabled {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-track-disabled.png) 0 13 0 13;
 border-color: transparent;
 border-width: 0 13px;
}

::-webkit-scrollbar-track-piece:horizontal:decrement {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-track.png) 0 13 0 13;
 border-color: transparent;
 border-width: 0 0 0 13px;
}

::-webkit-scrollbar-track-piece:horizontal:decrement:hover {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-track-hover.png) 0 13 0 13;
}

::-webkit-scrollbar-track-piece:horizontal:decrement:active {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-track-active.png) 0 13 0 13;
}

::-webkit-scrollbar-track-piece:horizontal:increment {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-track.png) 0 13 0 13;
 border-color: transparent;
 border-width: 0 13px 0 0;
}

::-webkit-scrollbar-track-piece:horizontal:increment:hover {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-track-hover.png) 0 13 0 13;
}

::-webkit-scrollbar-track-piece:horizontal:increment:active {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-track-active.png) 0 13 0 13;
}

::-webkit-scrollbar-button:horizontal {
 width: 20px;
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button.png) 0 2 0 2;
 border-color: transparent;
 border-width: 0 2px;
}

::-webkit-scrollbar-button:horizontal:decrement {
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-decrement-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-background.png);
 background-repeat: no-repeat, repeat-x;
 background-position: 2px 3px, 0 0;
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-hover.png) 0 2 0 2;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-decrement-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-background-hover.png);
}

::-webkit-scrollbar-button:horizontal:decrement:active {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-active.png) 0 2 0 2;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-decrement-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-background-active.png);
}

::-webkit-scrollbar-button:horizontal:decrement:window-inactive {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-inactive.png) 0 2 0 2;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-decrement-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-background-inactive.png);
}

::-webkit-scrollbar-button:horizontal:increment {
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-increment-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-background.png);
 background-repeat: no-repeat, repeat-x;
 background-position: 7px 3px, 0 0;
}

::-webkit-scrollbar-button:horizontal:increment:hover {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-hover.png) 0 2 0 2;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-increment-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-background-hover.png);
}

::-webkit-scrollbar-button:horizontal:increment:active {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-active.png) 0 2 0 2;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-increment-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-background-active.png);
}

::-webkit-scrollbar-button:horizontal:increment:window-inactive {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-inactive.png) 0 2 0 2;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-increment-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/horizontal-button-background-inactive.png);
}

:not(.single)::-webkit-scrollbar-button:double-button:horizontal:start:decrement, .double-start::-webkit-scrollbar-button:horizontal:start:decrement, .double-both::-webkit-scrollbar-button:horizontal:start:decrement {
 width: 14px;
 border-right-width: 0;
 background-position: 2px 3px, 0 0;
}

:not(.single)::-webkit-scrollbar-button:double-button:horizontal:start:increment, .double-start::-webkit-scrollbar-button:horizontal:start:increment, .double-both::-webkit-scrollbar-button:horizontal:start:increment {
 background-position: 3px 3px, 0 0;
}

:not(.single)::-webkit-scrollbar-button:double-button:horizontal:end:decrement, .double-end::-webkit-scrollbar-button:horizontal:end:decrement, .double-both::-webkit-scrollbar-button:horizontal:end:decrement {
 background-position: 7px 3px, 0 0;
}

:not(.single)::-webkit-scrollbar-button:double-button:horizontal:end:increment, .double-end::-webkit-scrollbar-button:horizontal:end:increment, .double-both::-webkit-scrollbar-button:horizontal:end:increment {
 width: 14px;
 border-left-width: 0;
 background-position: 3px 3px, 0 0;
}

::-webkit-scrollbar-button:horizontal:end:increment:corner-present {
 border-right-width: 0;
 width: 19px;
}

:not(.single)::-webkit-scrollbar-button:double-button:horizontal:end:increment:corner-present, .double-end::-webkit-scrollbar-button:horizontal:end:increment:corner-present, .double-both::-webkit-scrollbar-button:horizontal:end:increment:corner-present {
 width: 13px;
}

/* Vertical Scrollbar Styles */

::-webkit-scrollbar:vertical {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button.png) 2 0 2 0;
 border-color: transparent;
 border-width: 2px 0;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background.png);
 background-repeat: repeat-y;
}

::-webkit-scrollbar:vertical:corner-present {
 border-bottom-width: 0;
}

::-webkit-scrollbar-track:vertical:disabled:corner-present {
 margin-bottom: 5px;
}

::-webkit-scrollbar:vertical:window-inactive {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-inactive.png) 2 0 2 0;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background-inactive.png);
}

::-webkit-scrollbar-thumb:vertical {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb.png) 13 0 13 0;
 border-color: transparent;
 border-width: 13px 0;
 min-height: 20px;
}

::-webkit-scrollbar-thumb:vertical:hover {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb-hover.png) 13 0 13 0;
}

::-webkit-scrollbar-thumb:vertical:active {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb-active.png) 13 0 13 0;
}

::-webkit-scrollbar-thumb:vertical:window-inactive {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb-inactive.png) 13 0 13 0;
}

::-webkit-scrollbar-track-piece:vertical:start:no-button, .double-end::-webkit-scrollbar-track-piece:vertical:start, .none::-webkit-scrollbar-track-piece:vertical:start {
 margin-top: 6px;
}

::-webkit-scrollbar-track-piece:vertical:end:no-button, .double-start::-webkit-scrollbar-track-piece:vertical:end, .none::-webkit-scrollbar-track-piece:vertical:end {
 margin-bottom: 6px;
}

::-webkit-scrollbar-track-piece:vertical:end:no-button:corner-present, .double-start::-webkit-scrollbar-track-piece:vertical:end:corner-present, .none::-webkit-scrollbar-track-piece:vertical:end:corner-present {
 margin-bottom: 5px;
}

:not(.none):not(.double-end)::-webkit-scrollbar-track-piece:vertical:start:single-button, :not(.none):not(.double-end)::-webkit-scrollbar-track-piece:vertical:start:double-button, .single::-webkit-scrollbar-track-piece:vertical:start, .double-start::-webkit-scrollbar-track-piece:vertical:start, .double-both::-webkit-scrollbar-track-piece:vertical:start {
 margin-top: -6px;
}

:not(.none):not(.double-start)::-webkit-scrollbar-track-piece:vertical:end:single-button, :not(.none):not(.double-start)::-webkit-scrollbar-track-piece:vertical:end:double-button, .single::-webkit-scrollbar-track-piece:vertical:end, .double-end::-webkit-scrollbar-track-piece:vertical:end, .double-both::-webkit-scrollbar-track-piece:vertical:end {
 margin-bottom: -6px;
}

::-webkit-scrollbar-track:vertical:disabled {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-disabled.png) 13 0 13 0;
 border-color: transparent;
 border-width: 13px 0;
}

::-webkit-scrollbar-track-piece:vertical:decrement {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track.png) 13 0 13 0;
 border-color: transparent;
 border-width: 13px 0 0 0;
}

::-webkit-scrollbar-track-piece:vertical:decrement:hover {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-hover.png) 13 0 13 0;
}

::-webkit-scrollbar-track-piece:vertical:decrement:active {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-active.png) 13 0 13 0;
}

::-webkit-scrollbar-track-piece:vertical:increment {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track.png) 13 0 13 0;
 border-color: transparent;
 border-width: 0 0 13px 0;
}

::-webkit-scrollbar-track-piece:vertical:increment:hover {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-hover.png) 13 0 13 0;
}

::-webkit-scrollbar-track-piece:vertical:increment:active {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-active.png) 13 0 13 0;
}

::-webkit-scrollbar-button:vertical {
 height: 20px;
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button.png) 2 0 2 0;
 border-color: transparent;
 border-width: 2px 0;
}

::-webkit-scrollbar-button:vertical:decrement {
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background.png);
 background-repeat: no-repeat, repeat-y;
 background-position: 3px 3px, 0 0;
}

::-webkit-scrollbar-button:vertical:decrement:hover {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-hover.png) 2 0 2 0;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background-hover.png);
}

::-webkit-scrollbar-button:vertical:decrement:active {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-active.png) 2 0 2 0;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background-active.png);
}

::-webkit-scrollbar-button:vertical:decrement:window-inactive {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-inactive.png) 2 0 2 0;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background-inactive.png);
}

::-webkit-scrollbar-button:vertical:increment {
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background.png);
 background-repeat: no-repeat, repeat-y;
 background-position: 3px 8px, 0 0;
}

::-webkit-scrollbar-button:vertical:increment:hover {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-hover.png) 2 0 2 0;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background-hover.png);
}

::-webkit-scrollbar-button:vertical:increment:active {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-active.png) 2 0 2 0;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background-active.png);
}

::-webkit-scrollbar-button:vertical:increment:window-inactive {
 -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-inactive.png) 2 0 2 0;
 background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background-inactive.png);
}

:not(.single)::-webkit-scrollbar-button:double-button:vertical:start:decrement, .double-start::-webkit-scrollbar-button:vertical:start:decrement, .double-both::-webkit-scrollbar-button:vertical:start:decrement {
 height: 14px;
 border-bottom-width: 0;
 background-position: 3px 3px, 0 0;
}

:not(.single)::-webkit-scrollbar-button:double-button:vertical:start:increment, .double-start::-webkit-scrollbar-button:vertical:start:increment, .double-both::-webkit-scrollbar-button:vertical:start:increment {
 background-position: 3px 4px, 0 0;
}

:not(.single)::-webkit-scrollbar-button:double-button:vertical:end:decrement, .double-end::-webkit-scrollbar-button:vertical:end:decrement, .double-both::-webkit-scrollbar-button:vertical:end:decrement {
 background-position: 3px 8px, 0 0;
}

:not(.single)::-webkit-scrollbar-button:double-button:vertical:end:increment, .double-end::-webkit-scrollbar-button:vertical:end:increment, .double-both::-webkit-scrollbar-button:vertical:end:increment {
 height: 14px;
 border-top-width: 0;
 background-position: 3px 4px, 0 0;
}

::-webkit-scrollbar-button:vertical:end:increment:corner-present {
 border-bottom-width: 0;
 height: 19px;
}

:not(.single)::-webkit-scrollbar-button:double-button:vertical:end:increment:corner-present, .double-end::-webkit-scrollbar-button:vertical:end:increment:corner-present, .double-both::-webkit-scrollbar-button:vertical:end:increment:corner-present {
 height: 13px;
}

/* Forced Scrollbar Mode Styles */

.single::-webkit-scrollbar-button:start:decrement, .single::-webkit-scrollbar-button:end:increment {
 display: block;
}
 .single::-webkit-scrollbar-button:start:increment, .single::-webkit-scrollbar-button:end:decrement {
 display: none;
}
 .double-end::-webkit-scrollbar-button:start {
 display: none;
}
 .double-end::-webkit-scrollbar-button:end {
 display: block;
}
 .double-start::-webkit-scrollbar-button:start {
 display: block;
}
 .double-start::-webkit-scrollbar-button:end {
 display: none;
}
 .double-both::-webkit-scrollbar-button {
 display: block;
}
 .none::-webkit-scrollbar-button {
 display: none;
}
.test {
    -webkit-transform:rotate(-1.5deg);
    -moz-transform:rotate(-1.5deg);
    transform:rotate(-1.5deg);
    height:425px;
    width:685px;
}
.test div {
    margin:0;
    width:100%;
    height:100%;
    overflow:scroll;
    background:blue
}
</style>
</head>
<body>
<div class="test">
    <div>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
</div>
</body>
</html>

I haven’t got time to play with it today and you may be able to narrow it down a bit and find something in there that will trigger the normal scrollbar to work. Or else make your own as that example.

3

Whoa… Thanks.

This will give me something to work with this weekend. If and when i get results i will be sure to post.

PChuprina

4

Hi,

Instead of using css to replace the errant vertical scroll bar I decided to try Jscrollpane at: Scrollpane

At first glance it works quite nicely, with less coding needed, except for a major detail: It is cutting off at least 7 lines of text on the bottom, depending on the browser. The results can be seen at: Scroll cutoff test What am I missing, how could I correct this?

Any help and/or guidance would be appreciated.

5

Looks like you fixed it or I’m looking at the wrong thing :slight_smile:

6

Thats what i thought at first! LOL…
Unfortunately, depending on the browser, I cut off 7 to 12 lines of text on the bottom!

In chrome I’m missing:

<div class="relevant">
<img src="images/relevant.png" alt="Technical Skills" class="relevant_img"/>
<ul class="relevant_words">
	<li>20 years experience working as a commercial photographer.</li>
	<li>Thorough knowledge of digital and traditional photography.</li>
	<li>Specialized in product photography for web, catalogs and advertising purposes.</li>
	<li>Managed the creation and production of print catalogs and preparation of images for the web.</li>
	<li>Created and prepared internet advertising campaigns.</li>
	<li>prepared production schedules and worked to meet timely deadlines.</li>
</ul>
</div>

<div class="employment">
<img src="images/employment.png" alt="Employment" class="employment_img"/>
<div class="employment_words">
<p class="owner">Owner of Web Design and Photo Studio <span class="owner_chuprina">CHUPRINACREATIVE</span></p>
<p class="allied">Manager of Graphics, PhotoDepartment<span class="allied_name">ALLIED ASIA</span></p>
<p class="giftcraft">Senior Staff Digital Photographer<span class="giftcraft_name">GIFTCRAFT INC</span></p				</div>	
</div>

On Firefox I’m missing a bit less!!!
No idea why. No answers from support sites for Jscrollpane - yet. Received idea from stackoverflow:

This looks like a simple problem of timing. You are/something is altering the content of the scroll pane after the jsScrollPane() function has run. First try simply including it in a $(document).ready() function. If that doesn’t work go through your functions and check to see if any javascript is altering the size of that container and add jsScrollPane() as a callback.

Tried $(document).ready() with no success. No mention of this on Jscrollpane pages, not sure now where or how to implement it on this code:

<script type="text/javascript">
$(function()
{
	$('#resume').jScrollPane();
});
</script>
</head>

other javascript is for Google analytics, I don’t think that should effect the Container #resume size.

Not sure of my next step. Recommendations? Go back to CSS(lots) for own scroll bar image? Any guidance, ideas, direction, and/or help accepted.

Thanks
PChuprina

7

Hi,

Its the embedded fonts that are causing the discrepancy as they take time to load and are changing the height of the content after the page has rendered. If you remove the fonts then the page works as expected.

You could try delaying the scrollpane script by 5 seconds (via js) or so to see if that has an effect.

8

Thanks, that makes sense. Not sure how to implement it though.

I tried this in the code:

$(function()
{
	$('#resume').jScrollPane(
		{
		autoReinitialise: true
		}
);
});

Works! One notable exception is the jitters in the Chrome browser, which I guess is the reinitializing. Seen at: reinitializing jitters

So I’m closer, showing content… I guess I have two venues:[LIST=1]
[]Implement timedelay. Don’t know how, and guidance accepted.
[]stop the jitters. Longer time intervals still cause jitters. Don’t know how to stop it, any help appreciated.
[/LIST]

Thanks for your help, guidance already. Any more guidance help would be appreciated. Another learning day.

PChuprina

9

It seems to be working and I didn’t notice the jitters in chrome although it did come up with an unresponsive script error on first load but that mau have been a co-incidence.

I have noticed on may sites that use embedded fonts that you get a flash or jump on the page once the fonts get loaded and everything re-positions. Depending on latency you can often see all the text changing from normal text to embedded font which can be quite disconcerting and is one of the drawbacks of font embedding.

To implement a time delay you’d probably need to use setTimeOut() but that’s a javascript question and best asked in the JS forum for a better answer :).