62 lines
No EOL
3.1 KiB
HTML
62 lines
No EOL
3.1 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
<html>
|
|
<head>
|
|
|
|
<title>jScrollPane - known issues</title>
|
|
|
|
<!-- styles specific to demo site -->
|
|
<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
|
|
|
|
<!-- latest jQuery direct from google's CDN -->
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
|
<!-- scripts specific to this demo site -->
|
|
<script type="text/javascript" src="script/demo.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="top-nav">
|
|
<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
|
|
<ul>
|
|
<li><a href="index.html">Home</a></li>
|
|
<li><a href="index.html#examples">Examples</a></li>
|
|
<li><a href="index.html#themes">Themes</a></li>
|
|
<li><a href="index.html#usage">How to use</a></li>
|
|
<li><a href="faqs.html">FAQs</a></li>
|
|
<li><a href="known_issues.html">Known issues</a></li>
|
|
<li><a href="index.html#support">Support</a></li>
|
|
<li><a href="index.html#download">Download</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="container">
|
|
<h1>jScrollPane - cross browser styleable scrollbars with jQuery and CSS</h1>
|
|
<p>
|
|
This page discusses known issues with jScrollPane and provides suggested workarounds for these issues.
|
|
</p>
|
|
<h2 id="opera-scrollbar">In Opera the main window scrollbar appears when a jScrollPane contains lots of content</h2>
|
|
<p>
|
|
As far as I can tell this is due to a bug in Opera. The workaround is to include something absolutely
|
|
positioned as a parent of your jScrollPane. See <a href="http://code.google.com/p/jscrollpane/issues/detail?id=19">
|
|
this bug report</a> (from the previous version of jScrollPane) for discussion of this problem.
|
|
</p>
|
|
<h2 id="webkit-css-first">In Webkit browsers CSS must be included before Javascript</h2>
|
|
<p>
|
|
For jScrollPane to work correctly in Webkit based browsers (e.g. Safari, Chrome, iOS and Android) then
|
|
the CSS must be included above your javascript includes. Otherwise jScrollPane can't correctly measure
|
|
the size of the item you are applying jScrollPane to. See all of the <a href="index.html#examples">
|
|
example</a> or <a href="index.html#themes">theme</a> pages for a reference as to the correct ordering
|
|
of items in your <head>.
|
|
</p>
|
|
<h2 id="specified-width">Width specified directly on an element you apply jScrollPane to will be overwritten</h2>
|
|
<p>
|
|
If you apply a width to an element (e.g. via jQuery's width method or via a style attribute) then this
|
|
width will be overwritten when you reinitialise the scrollpane. Unforunately I can't find a way to avoid
|
|
this and still support percentage based widths for elements/
|
|
</p>
|
|
<p>
|
|
As a workaround you can specify the width via a CSS class refering to a stylesheet rule. If you can't do
|
|
this (e.g. you calculate the width dynamically) you will have to wrap your element in an additional div
|
|
and apply the width to that element while setting the width of your element to 100% via the stylesheet.
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html> |