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.
Related
I am able to change the position (swipe up) of my View accordingly with PanResPonder. The problem is during the swipe motion, the content of the View being dragged for the swipe do not render.
I tried using flexGrow:1 and flex:1 so as the View enlarge with the swipe, the View would be getting filled by content.
I know there a few libraries out there for swipes but I think this is fairly doable without library.
Thanks in advance cheers.
It really depends on your approach there. First things first.
You have to understand about JS Bridge and Native on react-native. The JSBridge is single-treaded and all the fired renders go through there. It means you can easily get dropped on FPS if you do not take it into account. The Native, well, is native code running, thats all.
To have performant app, you have to keep the passes over the bridge to a minimun.
The PanResponder touches happen on the native side, while the component renders use the bridge. You should put some code there, but i would bet that the problem is with too many renders happening and the JS Bridge gets overloaded.
Also try to use Direct Manipulation (https://facebook.github.io/react-native/docs/direct-manipulation.html) to avoit rendering one entire tree and perform it on the native side.
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 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.
This is a problem that seems to have occurred for no reason. Everything was working fine, and now all of a sudden the overlay iframe for the admin interface renders too high so that any tabs are rendered underneath the toolbar. I hadn't edited any css or html so I don't see how I could have done this. Has anyone seen this happen, and how did they fix it? I'm attaching two images. One shows the site as it is (incorrectly). The other shows another similar site that is functioning correctly. Also, notice on the incorrect display, somehow the toolbar is showing OVER the browser scrollbar.
The problem is that I was swapping in JQuery 1.8.3 with hook_js_alter. This has a known problem causing this exact issue. I didn't need a later version of JQuery after all so I removed that, and it fixed the problem.
Since a couple of months, my custom overlays appear to be disabled.
They are still visible and displayed correctly, but the link does not work anymore, nor does the CSS that changes z-index. They just seem to be drawn, and that's it.
The link is there, but I can't click it.
This happened in Chrome and Firefox, not in IE.
Has anyone had similar issues? I've searched and searched the web again and again, nothing. However I'm sure I must've missed something.
Ok, I finally figured it out: wrong overlay layer. One is specifically dedicated to mouse events: overlayMouseTarget