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.
Related
I'm creating a third-party app, which is loaded through an iframe.
The iframe creates a draggable element in side it.
On first page load (before scrolling the page), the draggable (slider) works fine.
But after scrolling the page behind the iframe, it's hard to get the slider to slide again.
(Note that this is a mobile issue, safari on iOS especially, but also chrome on iOS)
In the following demo I have used the GSAP Draggable library with react to create the draggable element but have also tried to code it in plain react with no luck.
Here is a demo: https://unfjl.csb.app/
I have tried a lot of different things (css, touchevents etc), but cannot get it to work...
What could cause this behaviour?
Update (no iframe example)
Demo no iframe: https://p5cu9.csb.app/
Same example with slider as above, but in this example the draggable is rendered directly in the DOM and not in an iframe. The problem still occurs. I suspect it has something to do with the fixed css position of the slider...
This is gonna sound really strange, but a bug in iOS Safari causes that and the only way I know of to get around it (which I discovered today via Googling) is to add a "touchstart" listener to the of the top-level page (not the iframe)!
document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});
That isn't something I can add to Draggable because it wouldn't be able to access the parent document (outside the iframe) to add that properly (security restrictions in the browser).
You could also add a touchforcechange listener that prevents the default behavior (I'll be adding that to Draggable itself too):
yourDraggableElement.addEventListener("touchforcechange", function(event) {
event.preventDefault();
});
Browser bugs are fun, aren't they?! ;)
(Originally answered in the GreenSock forums at https://greensock.com/forums/topic/21450-draggable-in-iframe-on-mobile-is-buggy/?tab=comments#comment-101225)
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
ionicModal is appearing like a popup along with backdrop in iPad (Fine in android tabs with full screen view). Modal is closing whenever user clicks on backdrop. It will be an issue if user is filling a form.
Yes, I can use backdropClickToClose: false property while creating modal but I used over 60 modals all over my app. Is there any way to set backdropClickToClose:false globally in a config like
$ionicModal.config {
backdropClickToClose : false
}
Thanks in advance.
Unfortunately, I have not been able to find how to do this using config. There currently doesn't seem to be a way to do it that way.
The only thing I found is the commit for the backdropClickToClose configuration for $ionicModal, which may give others a clue as to how this can be achieved.
Another idea would be to wrap the $ionicModal in a service and have some default parameters implemented in there, but I am not sure whether that would be a solution to your problem.
If you really want to be able to configure this, you may want to consider submitting an issue on GitHub, which you can do here.
I created a long form using Angular Material. Weird thing is that instead of the page displaying normally it starts off midway through the form.
Is this something my browser is doing (Perhaps it thinks I left off at a certain point last time)?
Not sure how to force the page to load normally and start from the top.
Has anyone encountered this before?
I was able to track down the issue and it was the md-autocomplete field causing the page to scroll down. To fix this I added md-autofocus="false" in the md-autocomplete field and now it loads normally.
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.