fullPage.js
fullPage.js copied to clipboard
alvarotrigo
Jerky playback on Safari (iOS) using autoScrolling:false + dragAndMove:true
When I scroll slowly on iOS (iPhone), the playback is jerky.
Here's a video: https://www.screencast.com/t/BbfsiP8FD
Here's my simple code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/lib/jquery/dist/jquery.min.js"></script>
<link href="/lib/fullpage/fullpage.min.css?20200707101018000" rel="stylesheet" type="text/css"></link>
<script src="/lib/fullpage/extentions/responsiveSlides/fullpage.responsiveSlides.min.js?20201119103413000" type="text/javascript"></script>
<script src="/lib/fullpage/extentions/dragAndMove/fullpage.dragAndMove.min.js?20201119103413000" type="text/javascript"></script>
<script src="/lib/fullpage/extentions/scrollHorizontally/fullpage.scrollHorizontally.min.js?20201119103413000" type="text/javascript"></script>
<script src="/lib/fullpage/fullpage.extensions.min.js?20201125071323702" type="text/javascript"></script>
</head>
<body>
<div id="fullpage">
<div class="section" style="background-color:yellow">
</div>
<div class="section" style="background-color:red">
</div>
<div class="section" style="background-color:blue">
</div>
<div class="section" style="background-color:green">
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var myFullpage = new fullpage('#fullpage', {
licenseKey: '-',
verticalCentered: true,
slidesNavigation: true,
scrollHorizontally: true,
scrollHorizontallyKey: "-",
dragAndMove: true,
dragAndMoveKey: '-',
responsiveSlides: true,
responsiveSlidesKey: "-",
responsiveWidth: 1000,
touchSensitivity: 15
});
});
</script>
</body>
</html>
Here's jsfiddle: https://jsfiddle.net/13er4jq8/
Versions
fullpagejs: 3.0.9 Safari iOS 14 iPhone 12 Pro Max
I can't reproduce your issue on your jsfiddle. Neither on any of the demo pages.
Can you please provide an isolated reproduction in jsfiddle or codepen, with no CSS or JS files external to fullPage.js and the minimum amount of HTML code? Use empty sections unless strictly necessary for the reproduction.
Neither jsfiddle nor codepen will give us 100% "clean" code. If you want - I can email you a link to a sample on my website?
I narrowed it down. The jerkyness happens when I add the "responsiveWidth: 1000"...
var myFullpage = new fullpage('#fullpage', {
licenseKey: '-',
verticalCentered: true,
slidesNavigation: true,
scrollHorizontally: true,
scrollHorizontallyKey: "-",
dragAndMove: true,
dragAndMoveKey: '-',
responsiveSlides: true,
responsiveSlidesKey: "-",
responsiveWidth: 1000,
touchSensitivity: 15
});
If I remove the "responsiveWidth: 1000" then the scroll is perfectly smooth. My code is as above - way trimmed down and only yours and jquery script.
Thanks for that! 👍 I was able to reproduce the issue.
So, why exactly are you using responsiveWidth ?
What's your purpose with it?
Well I thought it was a property to tell fullpagejs at which width to be responsive :)
Yeah, but usually responsive mode is used to turn off autoscrolling or increase the size of sections so they can be higher than the viewport.
If in your case you are not going to change the size of sections you can just omit the responsive option. You are using the Drag And Move extension and your users will have a good scrolling experience even when autoScrolling is turned on.
I'll keep it open in any case and there's clearly an issue when using both options together:
dragAndMove: true,
autoScrolling: false
The responsive option basically turns autoScrolling: true to autoScrolling:falke (in addition of a few more things) but that's the issue that concerns us here :)