I have a problem with a scrollbar inserted through Ionic 2+ Framework.
I want to deploy a app in Windows 10. I have introduced ion-scroll and all is working. My issue is: When I change to "Tablet mode" and disconnect the mouse and keyboard,where I only can use the touch screen, then the scrollbar inserted is replaced by another scroll, more thinner and I can´t interact with that. I can´t swipe the scrollbar.
I´ve tried to solve the problema with jquery, where I have used jscrollpane, also I have implemented this with CSS (overflow) and Ionic 2+ framework as I have said before.
Related
I faced a strange bug with element animation. It works good on Android phones and Windows PCs, but behaves strange on iOS and MacOS: the back ring starts hopping up and down, and I can't figure out what's wrong, any ideas?
The app was build on vue3 and the chart was made with Apex charts.
Here's a link (with uid for a backend to work properly) https://clientdash.psyreply.com?uid=68304
How it looks like on Android
How it looks like on iOS
I'm developing an app with Ionic 1.3.3, and I want it to be available on desktop browsers as well. For this reason, I need to disable the automatic Ionic scroll because it is adapted for touchscreens and not intuitive for computers (maintain click + sliding). I know how to add a browser scrollbar by using overflow:auto; on all my ion-content.
So far I have only managed to hide the Ionic scrollbar, using the following solutions:
scrollbar-y="false"
on the ion-content, or
display: none;
on the scrollbar css. However, hiding it is not enough for what I want.
I tried several Ionic 2 solutions (for example How can I disable or hide the scrollbar within an Ionic 2 <ion-content>), but they don't seem to work, and they don't all apply since the files are not all the same.
I also tried
overflow-scroll="false"
on my ion-content, no success.
Thank you for your answers.
I have this in one of my codes, I don't now if this could helps you but it works for me:
<ion-content scroll="false">
You can found some info about this attribute in http://ionicframework.com/docs/api/directive/ionContent/
The left and right buttons for the slider and the small buttons below the slider doesn't work when clicked. only works in IE but not on Firefox and chrome.
Also the images gets out of place when I re-size the browser window to a mobile phone size or tablet size browser.
this is the website http://amakris.com
Thank you
I have been driving myself crazy trying to find an answer to this very problem and I think I just have. It would appear that for the last almost 8 months that Flexslider 2.0 has had a known problem with touch devices. Personally I have an AIO touchscreen and just proved what I found. If you have a touch enabled device and visit any website using flexslider, including Woo's demo - you will notice that by using the "touch" device the slider buttons and navigation work perfectly, but not if you use the mouse.
Apparently there is a touch enabled feature in Chrome which may or may not be able to be turned off or programmed off with a little bit of code. See here: https://github.com/woothemes/FlexSlider/issues/351
It would appear that since flexslider is touch enabled, Chrome and AIO desktops or other touch devices signal to Flexslider to turn off the manual navigation because it is not needed.
I for one am happy that I can stop driving myself crazy now. Enough time has been wasted thinking about this.
I hope anyone else that finds this can rest easy to.
I am using jQuery Mobile + Phonegap, when I run the app on chrome all the buttons (lists, back, home) of jQuery work perfect.
When I put it on my Android device all the button icons seem to be moved like the css is wrong so they are either grambled (like half another icon is show instead) or they do not appear at all and the space is left blank.
Any suggestions?
I am using jQuery Mobile 1.0.1.
Thank you!
We've run into an optimization problem using WebKit on Mac OS X that we're hoping someone can help us with.
We've written a Cocoa app for Mac OS X that essentially manages a single WebView that points to our online web site. Everything is working fine for the most part. However our web site uses CSS's position:fixed to keep a thin "header bar" locked to the top of the WebView, similar to the big orange "Welcome" bar at the top of StackOverflow.com. We've determined that with position:fixed active, scrolling the WebView forces the entire web page to re-draw itself, which causes scrolling to be agonizingly slow. With position:fixed disabled, scrolling is very fast and fluid; only the page elements that are scrolled "into view" need to be drawn.
We know that this isn't a bug in our Cocoa app code, nor is it a problem with our HTML/CSS code. The same slow scrolling occurs using WebKit test code from Apple. We can point Apple's test code to http://www.StackOverflow.com as a test and we see the exact same behavior. There's also a test page in the Mozilla bug database that we've been using to test the problem (https://bug201307.bugzilla.mozilla.org/attachment.cgi?id=139911). The odd thing is that some WebKit-based browsers on the Mac (eg, Safari and Chrome) don't have this problem; scrolling is always fast on pages using CSS's position:fixed with those two browsers.
Has anyone else experienced this problem with WebKit on OS X? If so, what can we do to speed up our scrolling? Thanks.
I might be way off here as I'm not sure if the same will apply in your web view, but using a style that forces the nav onto its own layer may help.
Something like translateZ(0), or translate3d(0,0,0,). I've come across similar issues when building with Phonegap and applying some thought to layering really helped out.
I believe the browser can utilise hardware acceleration where a third dimension is involved.
I was having a similar problem: the fixed bar was flickering when I was scrolling the page.
So I forced the WebView to use layers and I fixed
[w setWantsLayer:YES];
I had a similar issue in my webview based mac app. It has header and footer with position:fixed css property. Latest webkit shipped with 10.10.x and above don't suffer from this issue. It happens in webkit for mavericks (10.9.x). I got it working by setting these properties for the webview
[self.webView setWantsLayer:YES];
[self.webView setCanDrawSubviewsIntoLayer:YES];