slider bar not working
I am creating an interactive epub in which the user can select a value by using a slider bar. I am using xhtml files and and input type="range" to create the slider.
When the slider is on the first page of the book, it works properly. However, when the slider is on the second page, when I touch it the marker goes to the right part of the slider and it is impossible to select any other position.
I write you an example of the xhtml file:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example of slider bar problem</title>
<link charset="utf-8" href="./Styles/main.css" media="screen" rel="stylesheet" type="text/css" />
<link charset="utf-8" href="./Styles/plot.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>Example of slider bar problem</h3>
<h1 id="heading_id_2">Subtitle</h1>
<canvas id="canvas" width="340" height="415"></canvas>
<p>Lorem ipsum dolor sit amet, suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue wisi enim nunc ultricies dolor sit, magna tincidunt. Maecenas aliquam est maecenas ligula nostra.</p>
<form action="#" id="inputdata" method="">
<dl>
<dt><label for="wdim">Temperatura :</label></dt>
<dd><input id="wdim" max="1" min="0" name="wdim" step="0.01" type="range" value="0.5" /> <span class="error" id="resw"></span></dd>
</dl>
</form>
<div style="clear: both;"></div>
<script charset="utf-8" type="text/javascript">
//<![CDATA[
window.addEventListener("load", ui.init, false);
//]]>
</script>
If I create the epub and I open in my ipad3, the slider is on the first page and everything is OK. But if i select a bigger type font, the slider is now on the second page and doesn't work.
Any suggestion?
iPad
