I am developing an app with angular and ionic, and I am facing a strange issue with scrolling.
What I currently have, is a directive to display some temperatures on a page.
Everything works, but if I try to scroll using the mouse wheel (when the mouse cursor hover some text) the page won't scroll. If, however, I have the mouse cursor somewhere else, the page scrolls.
To better explain and show this issue, I've created a codepen which you can find here: http://codepen.io/NickHG/pen/beBGdx
I have no idea why this happens.
Any suggestion?
Thanks
I've found a workaround.
Set overflow-scroll="true" in the ion-content.
Related
A simple, one page view website, which I built on ReactJS started twitching anytime I moved my cursor. It seems like the browser width is changing, with a few pixels of margin added to the right, every time that happens. This doesn't seem to happen when viewing with the Chrome browser in mobile screen mode, under the developer tools. Which probably means it's as a result of the cursur interacting with the page. Has anyone encountered something similar?
It usually happens when you have an element that changes its width, padding, margin or border on hover or a Javascript event. This is not caused by React.
Please, share some css or JS you think may be involved to help more.
I found the bug, an animating component that kept touching the edge of the browser was the issue. I added some margin to the right of the component and the twitching stopped. Thanks to everyone for your help.
I have built an app that utilizes semantic UI tabs and ui-router. Every time I switch tabs, the page 'snaps' to the div where the tabs are being held, instead of maintaining its position. I do not have any idea where to even begin looking.
Note I faced another similar issue earlier on in the build, where angularUI grid was causing the page to hop around and snap to the view. For the sake of trying to fix the current issue, I have commented out any angularUI grid line that could have caused the issue, leading me to believe it has something to do with semantic.
Has anyone faced an issue like this? Where do I even begin troubleshooting?
*please note, I am scrolling back up in the gif, then clicking a tab, where it snaps back down
I have angular UI bootstrap's carousel directive implemented on my site. Everything is working fine and suddenly I noticed that whenever I browse to other sites, leaving my site open in one tab and come back to my site again, the pager and carousel controls stop working. It's strange but I have set my carousel to auto rotate and it also stops.
The carousel won't work until I refresh. First, I thought I had some bugs in my code, but when I tried their own slider from the https://angular-ui.github.io/bootstrap/#/carousel website, also shows the same behavior.
Any thoughts or fixes on this?
For the code, please visit this link :
https://angular-ui.github.io/bootstrap/#/carousel
And scroll down to the Carousel section and click Edit in Plunker.
Thankyou!
This is a known issue and is under investigation.
I have this weird issue with my angular app. It doesn't happen every time but I've been able to consistently reproduce it if I click to it as quickly as I can as soon as my angularjs app loads.
Basically my right pane directive will sometimes render a blank page. This page however appears when I resize the browser window a little bit.
I'm not even sure where to begin looking to resolve this bug. I tried messing around with $timeout and $scope.$apply but it didn't seem to do anything.
Has anyone seen anything like this before and if so, how did you resolve it?
Note the directive I use does use ng-include with a value that is dynamically generated from the custom directive's associated controller.
P.S. Another oddity, if I move my mouse over the allow main dock then it loads the page too. (I assume it's doing an unfocus action on the browser window.) I wanted to see if this was a browser specific issue because of this. Looks like it's only Chrome where this is a problem, as I can't reproduce the problem on firefox.
Same problem caused by CSS - display: table, found a solution by changing it to display: inline-block, so check if you have a such.
there is one issue with page scroll down you can,t select any tile i that for this try to re size your browser
and create a vertical scroll and then select any tile you will see the issue. please see this screen shot am facing this issue in html5 version. Thanks any help will be appriciated
Please see the attached screen shot
i got success to get resolved the issue. by getting scroll top and scroll left in jquery to get highlight specific tile in pivotviewer . so now when page resize it don,t disturb its position. :P