I set -webkit-overflow-scrolling: touch in CSS,Then When I scroll the elements, it will randomly jam,I've tried everything I can find,But it didn't work.
I found that ios13 discarded the CSS -webkit-overflow-scrolling: auto
This happens when I use Vscode to set -webkit-overflow-scrolling:
How can I use that property?
They killed it off.
https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes
This doesn't explicitly say that killed 'auto' but all signs point to them having done so.
I'm having nightmare issues with a popup that has a scrollable div inside. If the user 'bounces' it and then scrolls in a particular way it'll scroll the window underneath and then you can't scroll the div until the window has finished scrolling.
So set 'position: fixed' or something like that (I hear you say). Well I have - in fact I'm using Angular material and the actual scrolling on the underlying window is blocked but iOS seems to still run its physics algorithm even though nothing is animating.
At least this option used to let the user get less 'bouncy' and hope they'd not trigger this 'bug'.
--
There's also a new option that might help with issues caused by auto no longer being available - such as weird scrolling of parent elements as described above. However unfortunately I couldn't get this working with Safari, but it did work in Chrome as expected. And even if this does work it won't help restore the auto behavior if you just prefer the way it works.
overscroll-behavior: contain;
I think this preference or suggetion is not yet updated with vscode.
you can surely give a try and verify on actual IOS 13 Device.
-webkit-overflow-scrolling: auto;
as i can see in just suggestion is showing strikethrough in vscode.
Related
I need to make my mobile screen scrollable. For that i am using css property named - webkit-overflow-scroll: touch . but the browser says it is "Unknown Property name". Can any body tell me what is it means ?? . if anybody knows the alternative to this Please tell me ?
All touchscreens are scrollable by nature.
-webkit-overflow-scrolling: touch;
Notice is different to yours (scrolling not scroll) is for 'lazy scrolling' which means rather than the default of stopping immediately when you stop the action with your finger it uses momentum so the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. It also uses speed to determine the momentum and time it takes to stop scrolling, kind of like in real life.
I am fairly sure you cant stop scrolling in css but think there are some techniques available using javascript. Here is a question on SO talking about disabling touch scroll but I presume thats not what you want? Disable scrolling when touch moving certain element
I'm having a serious issue here trying to develop a hybrid application on iOS. The problem is that I use flex-direction: column-reverse in order to show replies in a message. Everything works fine but I need the translate3d or translateZ hack to get the replies updated when an event is received. Anyway, I do that, everythings fine as well but.. when I enable the -webkit-overflow-scrolling: touch, the content goes crazy. Everything's fine but the content is positioned wrong. If I change flex-direction: column-reverse to flex-direction: column everything is fine, but then I want the order in the exact other way ( and this way I benefit from the "always bottom" positioning when new message is received as well ).
If you have an iOS device, please check http://edi.srl/ios.html :: it's easier to see here than on jsfiddle. Go on landscape orientation and see what happens with the positioning of the "replies".
If I switch flex-direction: column-reverse to column, everything is ok but then the layout is not how I want it.
If I remove the translate3d or translateZ option, everything is ok as well, but the updates are not rendering ( unless I scroll the elements out of the viewport so they can get re-rendered ).
If I remove -webkit-overflow-scrolling: touch, again, everything is fine, but then the scroll would be really really weird to deal with as you probably know.
Any ideas ?
I have an HTML page with a fixed-height div which should be scrollable (only vertically). In iOS 5 this can be achieved using:
overflow-y: auto;
-webkit-overflow-scrolling: touch;
The div contains an unordered list with about 10 items.
The scrolling works, but sometimes it scrolls only if I swipe my finger diagonally or even horizontally and not vertically as it should be.
I'm wondering if anyone has encountered this issue. I don't want to think that it is a bug in iOS5, but I can't figure out what I'm doing wrong because most of the time it works fine.
I had exactly the same issue. The problem turned out to be caused by two zero size iframes my site used to track history changes and load scripts. Removing these fixed the issue. I filed a bug with apple, waiting to hear back from them.
Check to see if you have any iframes on your page they could be the cause.
I have found a hacky solution but it needs javascript...
I stumbled upon that problem while loading scrollable nodes via ajax and appending them with js.
I found out that resetting the -webkit-overflow-scrolling property with js saved the day
JS CODE:
var myDiv = $('.myDiv');
myDiv.css('-webkit-overflow-scrolling','auto');
function fn(){
myDiv.css('-webkit-overflow-scrolling','touch');
}
setTimeout(fn,500);
It really sucks that we have to call the setTimeout method but that's the only way I could think of...
EDIT : Watch out for display:none
Webkit overflow scrolling touch CSS bug on iPad
You need to put this css setting in your css file - the one you load using the content_css configuration variable:
body {
-webkit-transform: translate3d(0, 0, 0);
}
The other option is to set the css directly from code on tinymce initialization:
$(tinymce.activeEditor.getBody()).css('-webkit-transform', translate3d(0, 0, 0));
I had the same problem in iOS 5.1.1 and it turned out to be due to an ::after pseudo-element with position: fixed that was on an element that contained the scrollable list exhibiting the "wrong scroll axis" behavior. Details here.
The jQuery time-picker plugin that I wrote uses a div as the containing block for the list of times, and on Mobile Safari there are no scrollbars to indicate that there are more available times than are visible. I know about using two fingers to scroll within the div (on the iPad at least), but that only works if the user knows that there is more content to scroll to, and there's no indication that there is. So, my question: Has anyone been able to get scrollbars to show in Mobile Safari? How'd you do it?
Assuming you are using iOS5.0 or later, I think you have to use the following:
-webkit-overflow-scrolling: auto (this is default style)
auto: One finger scrolling without momentum.
The other available style is
-webkit-overflow-scrolling: touch
touch: Native-style scrolling. Specifying this style has the effect of creating a staking context (like opacity, masks, and transforms).
Using touch mode, the scrollbar will be visible when the user touches and scrolls, but disappear when not in use. If you want to make it always visible, then this old post will help you:
::-webkit-scrollbar {
-webkit-appearance: none;// you need to tweak this to make it available..
width: 8px;
}
Another Piece of Code for Thumb by #BJMC:
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Original Source
Edit: with respect to this demo's behaviour, you should use jQuery because it will help you a lot, $(document).ready(function(){//your code with timer}) code with timer will need to reset the CSS property to normal after desired time(let's say 5 sec.)
For the demo( that you have described), this is initiated with the onhover event, please check this fiddle I have created for that.
That reproduces the results in a desktop browser, and will also work in iPad, just add your timer code to suit your requirements.
Regarding the original question: the best solution to have scrollbars would be to use an external library (already recommended iScroll is good, but even jQuery UI itself contains scrollbars). But displaying ever-present scrollbars might deviate from the general iOS UI (see below).
Alternative would be to indicate with other GUI elements that the content is scrollable. Consider small gradient fields in the end of the element (the content fades to background there) that suggest that content continues when touched and scrolled.
In iOS5 overflow: scroll functions as expected, i.e it allows the the div to be scrolled up/down with one finger within the area specified by the dimensions of the div. But scrollable div doesn't have scrollbars. This is a bit different from the general UI in iOS(5). Generally there are no scrollbars also, but they appear when user starts scrolling a content area and fade out again after the touch event has stopped.
To answer Sam Hasler comment above.
Nicescroll 3 is a jquery plugin that does just what you want with fade in/out effect and work in all major Mobile/Tablet/Desktop browsers.
Live demo
Code:
$(document).ready(function() {
$("html").niceScroll({styler:"fb",cursorcolor:"#000"});
$("#divexample1").niceScroll();//or styles/options below
$("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true});
$("#divexample3").niceScroll("#divexample3 iframe",{boxzoom:true});
});
If you want to have the scroll to be always visible,
Do not set -webkit-overflow-scrolling: touch
then set custom style for scrollbar
::-webkit-scrollbar {
-webkit-appearance: none;// you need to tweak this to make it available..
width: 8px;
}
You loss the momentum effect, but scrollbar will always be there.
(tested under iPhone 4/ iOS 7)
Mobile safari, as far as I have seen won't support scrollbars.
The best plugin I could find to get the job done is this.
Its Demos are available here.
It also has multiple predefined skins to suit your application.
here's a sample of what you'll get -
By convention, scrollbars are not used on iOS.
For a div with overflow: scroll, the only native way to scroll is with two fingers.
You might take a look at iScroll, a JavaScript library which handles touch events and implements single-finger momentum scrolling (what users generally expect in native apps) for divs.
until ios5 you could not scroll internal divs - so you probably are not seeing a scroll bar when you try to scroll because there isn't one.
I haven't tested on ios5 but supposedly scrolling internal divs now works.
If it isn't an internal div then you should be able to see the scroll bar when it is scrolling only - this isn't just on ios anymore - lion has gotten rid of all native scroll bars too. You can only see them when a window is scrolling or when the window is first loaded.
This is a CSS related question, I got one good answer from my previous question, which suggested the use of some CSS code like overflow:auto together with a fixed height container.
And here is my actual implementation : on uni server
If by any chance you cannot access that server, try this
Please follow the instructions on screen and buy more than 4 kinds of tickets.
If you are using IE8, Opera, Safari, Chrome, you would notice that the lower right corner of the page now has a vertical scroll bar, which scrolls the content inside it and prevent it from overflowing. That's what I want to have in this section.
Now the problem is, this would not do in FireFox 3.6.2. Am I doing something not compliant to the CSS standard or FireFox has its own way of overflow control?
You can inspect the elements on screen, and all controlling functions are done in one javascript using jQuery. All CSS code is kept in a separated file as well.
According to the professor, FireFox would be the target browser, although the version was set to 2.0...
It seems you have to set a height / overflow to the <tbody> tag, not just the table (or maybe not the table at all, didn't test that).
So...
tbody { height: 130px; overflow: auto; }
And I specifically tested with "height", it seemed "max-height" didn't work as intended. Very odd behavior, indeed.
Have you tried overflow: scroll?