This is my first time using angular js components and everything works fine in all browsers except Internet explorer. I have added meta tag . Is there a way to make the components render in ie. I have a component which is not loading any HTML content.
Kindly suggest a workaround.
Related
We have an app that works fine in Edge and Chrome, but Firefox will not display the HTML generated by AngularJS. The app is using ui-router and components. Inspecting the page using the Developer Tools, you can clearly see the HTML, but it is greyed out and not visible on the page. What's going on?
I have an issue with render from the server. On the first load of the page, the layout goes for a toss. However it is corrected on subsequent renders via navigating the pages. Surprisingly the weired layout also appears on a browser refresh. I have tested it with both Chrome and Microsoft Edge but same problem.
The app was created using standard boilerplate 'create-next-app' and then I just added a few of my pages. See screenshots below
one with the weird screen
and other showing correct render
This actually an issue with CSS injection with SSR for material-ui. Check examples here
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)
Hi I am using svg sprite I created using icons8 website for all my website icons, and the icons are working but it seems that the website loads them more than once per page (if i open the network tab i can see it loaded twice or more). I have been looking for a solution for a while now and I cant seem to find the cause of this.
I work with react so I have a component for Icon which uses the tag with xlinkHref attribute.
did anyone encounter such behavior? if yes what would be the best way to approach a solution?
I have this issue here with the IE/Safari browsers, I have an IFrame with a PDF as it's content, and when i try to show a modal dialog it opens under the IFrame not above it, I tried to change the IFrame z-index/Position with no luck, and it seems to be an issue with the PDF plugin itself because I can see the IFrame borders behind the modal dialog
Any suggestions would be much appreciated :)
I have an update:
Ok, I am now positive that this is a PDF plugin issue not the IFrame, the IE put the PDF on top and no other component is allowed to overlay it
While i was searching I came a cross the PDF.js, it's very nice and doesn't rely in the browser PDF plugin, the only issue is that you cannot give it a stream to display!!! you have to provide a path to the PDF file on your server, which won't work for me
will keep you guys posted :)
I've ended up using the ViewerJS plugin to view the pdf documents inside the IFrame, it's very simple and you can embed it in your application, mine was MVC, you also can pass a stream or an url to your document, here is the link for their website, forgot to mention that it's for free :)
http://viewerjs.org/