I'm building a full screen slider. The last slide is supposed to have a horizontal scrolling area. I'm using css translations (for a smoother animation) to bring the div inside of the viewport.
For some reason, the scrollbar won't work unless you resize the window.
My guess is that when the scrollable div is created outside of the viewport, it is not rendered by Chrome (for performance reasons?).
Then I guess when you resize, the whole thing gets calculated and redrawn and then it is taken into account.
Here is a JSFiddle that illustrates my problem.
http://fiddle.jshell.net/f3thbjqc/6/show/
Here's a video that illustrates my problem (when I wiggle the mouse is when I try to scroll right, unsuccessfully. Then I resize, and it starts working).
My setup: Mac os High Sierra. Both Chrome 69.0.3497.100, and Safari 11.0.1 (13604.3.5) behave the same, firefox doesn't have the bug somehow
Had a similar problem with the materiallize framework when i was usings tabs and a slider inside. The problem was the slider was not working and after I resized the window it was working perfectly.
Try to fire this event manually when the slider is in view
window.dispatchEvent(new Event('resize'));
Related
I have a tricky problem with Webkit browsers and some custom scrolling behaviour.
On my page, I am detecting scroll, and when it happens, disable the scroll by making the body have overflow:hidden and then do some custom animation logic for the scroll position.
The problem on Webkit browsers (Mac OS) is when I re-enable scroll the native scroll seems to still be easing out, thus moving the page some more in the direction of the initial scroll event, which is undesirable in this case.
Is there a way to disable/reset native scroll or native scroll momentum?
Here is a codepen illustrating the problem. HOWEVER you need to download it as zip and run locally — whatever codepen is doing to the preview container prevents the "native" scroll that is causing the issue. When viewing locally and scrolling "down" what you should see in:
Firefox (the desired behaviour): For 25 frames after the scroll, the scroll position should not move, the page background should be beige. Only when scrolling again should the page animate again
Webkit: After 25 frames after the scroll, you'll see the page flicker white when the animation timeout finishes, and without scrolling anew the "old" native scroll easing seems to still be "ramping down", which triggers the scroll event, and immediately paints the page background beige again. I'd like to avoid this "old native scroll" triggering after I reenable the scrolling.
The solution was to use a different element than body as scroll wrapper. Apparently this behaviour of "resuming" momentum scrolling when re-formatting the body to be scrollable (have overflow) is hard-coded, whereas other scrollable elements do not exhibit this unpredictable side-effect.
I have an android app that uses webview to render large images in a div. The div has fixed width height to match the screen leaving some area on top for controls. The image has an image-map on it and areas created with links.
Now the issue is that when I drag the image from non-mapped areas, it works fine, but when I drag from mapped area, it does not work and I think stucks in the touch event (because I also see the orange focus border on the image map area that opens links).
This happens only when the page is run from within app+webview, but if I load the page in browser on same mobile, it works fine.
Also this does not happen in my Android 5.1 Vega IRON, but it happens in older phones like Android 4.4 Droid, and same version Huawei.
Is this some known issue?
This might have something to do with touch events in application, as it works in browser but not in application.
I found out that in some conditions, the image-map does not let the mouse button events go past, therefore it does not perform even the default dragging and click behavior.
I had to remove image-map and build my own absolute positioned and display:block <a> tags for each area, and then it worked.
Hope this helps someone.
http://jsbin.com/nesiside/1 (code is available http://jsbin.com/nesiside/1/edit)
If you scroll down in the document and click the "Lock/Unlock" button, an overlay with text will appear. You'll notice that the scrollbar length has been changed to accommodate the overlay height, not the original page height. Click "Unlock" in the overlay, and you return to the original page, in the previous scroll position.
System works great on desktop browsers, and on my Android phone, however, on iOS there is a rendering flash flash when the overlay is triggered or removed. Ultimately, I believe it is the fault of the scrollbar changing.
I've attempted the usual tricks to resolve iOS rendering issues (webkit-backface, transform3d), with no success.
Apparently, showing the content and hiding the overlay (or vise versa) was to much for the iPad 4 to render at once, causing the flash. This is odd because I tested it on an old Kindle and my Android phone and both are handled it fine with their slow processors.
To resolve the issue, I put the the scrollTop() method (used to return the user to the previous position on the underlying page) inside a requestAnimationFrame function. The result isn't perfect (content can be screen scrolling for a fraction of as section), but it is a much better result than an entire page flash.
I'm using the relative mode to start and end my animations using the Skrollr plugin (https://github.com/Prinzhorn/skrollr). Everything works great in IE but the animations are occurring early in Safari and Chrome and late in Firefox. I'm using data-bottom as my start point and data-center as my end point. So the animation should start right when the entire element just pops through the bottom of the viewport and should end at the center of the viewport.
Here is the website where you can see the animation occuring under div id="div56709" under the "Why Moms Ministry" section.
http://group.com/womens-ministry/where-moms-connect
Any ideas on why the above issues are occurring would be greatly appreciated.
So the animation should start right when the entire element just pops through the bottom of the viewport
Well, not exactly. data-bottom is short for data-bottom-bottom and means when the bottom of the element is at the bottom of the viewport. What you describe is data-bottom-top.
I tried it in Firefox and Chrome and it looks as expected.
One thing you could try is calling refresh() on window.onload. This will recalculate the relative mode. Maybe when you call init() there are some images not loaded which move the content down (even though you explicitly set width and height on the img elements.)
Edit: In fact, I just verified that this is the problem. You can verify by hitting ctrl+f5 to force a reload. The animation will be off. If you now resize your browser (triggering refresh internally) it works.
On iPad I cannot scroll a web page. It works fine in Safari, Chrome and Firefox on OS X.
The page has an area in which content can be scrolled only horizontally. It consists of a container div which has width = 100% and height = (100% - 40px). I am setting the height by a JavaScipt function which is triggered by window resize events. Inside this container is another div with the width of the content (very wide, to avoid line breaks). Inside that is the content.
CSS properties of the container are:
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
See the page and full source code here: dcfoto.de
On iPad, scrolling is not possible. What am I doing wrong?
By the way: resizing also does not work properly on orientation change. Maybe that's connected.
Unfortunately a two-finger swipe needs to be performed, and even then it is not responsive (when compared to the default one finger swipe scroll).
There are quite many javascript solutions out there, (sencha touch and iscroll being the most promising and advanced)
I would recommend http://cubiq.org/iscroll-4 which is hands down the coolest touch-scroll script out there. It also works for android, but quite more sluggishly since the default android browser albeit webkit based doesnot support css3 3d accelerated properties as good as the mobile safari one.
If I were you I would check for the user agent of the user, and deploy that script for android and ipad/iphone users.