In my application, I have a div (iframe) that I am hiding/showing when a button is clicked, which displays the content of my .xap file. When I click the button to hide the div, I see the Silverlight frame disappear, and when I click the button to reshow the div, the Silverlight App reloads. Sometimes it'll appear blank too, but when I right-click the area, it has "Silverlight" listed in the context menu.
According to this post, the reloading is a FireFox bug.
Does anyone have a work around to the reload?
In IE, the div appears without having to reload the Silverlight App. I would like to get FireFox to have the same behavior. More over, I would like to stop FireFox from making the div content blank.
Related
I have some strange problem with browser tab freeze when working with React and Angular projects. Browser tab freezes when I save some file but only if I do something like click on hamburger menu that shows another component or any action with components or browser tab.
Example:
-> I change something in component (added more text, changed some color)
-> saved file to auto reload
-> I can see changes on my browser tab (it looks like browser tab is not "refreshing" but changes that I've made are visible after save)
-> I add something to my component (anything)
-> I can see changes on my browser tab and everything is fine every time when I add or change something. BUT when I try to do some action like click on hamburger menu button, click on some nav button that changes component or even when I click "Toggle device toolbar" in browser dev tools then my browser tab freezes. Rendered component is showing with big delay, when I click some button then action is delayed and I have to close browser tab but it takes a while to close when I click on it to close it.
This problem appears in every browser I use (chrome, brave, firefox). My computer system is Ubuntu 20.04.2 LTS. I use VSCode for coding.
I'm not sure if this problem appears because of some IDE or project configuration. I think it's because something in Ubuntu but I don't know what is going on.
Edit.
It does not matter if it is big project full of code and logic or new one with simple one "Hello, World!" component - the problem appears always.
I'm trying to get a Google Chrome Extension to run as a Firefox Webextension. My original Problem is that the popup has no height. Besides that I could not for the life of me figure out how to inspect the DOM of the popup.
Btw the popup is just an HTML file and it is defined in browser_action.default_popup.
The bugs referenced in #minj's comment above are resolved in recent versions of Firefox. You can debug popups now. MDN explains it well; in brief...
enter about:debugging in the URL bar.
In the left-hand menu, click This Firefox (or This Nightly).
click Inspect next to your extension to open the "Extension Toolbox".
Check the option to "Disable Popup Auto-Hide" in the Extension Toolbox
then you select which HTML document you mean to debug (in this case it would be your popup HTML code) using the context switcher ("select an iframe as the currently targeted document")
After doing this, the popup stays on the screen and the inspector contains its HTML. I'm doing it now for the first time (in Firefox 49) and it's working well.
It's not currently possible since the popup closes automatically and there is no DOM view available. See bug 1236944 and bug 950936.
Popup sizing does not seem to work correctly in Firefox. There are a bunch of bugs related to it.
Whenever the page redirects (either due to refresh or a link out click), the button always disappears before all other elements. It's not visible on laptop, but quite visible on mobile devices. What could be the reason?
In the end, I found that it was due to the backface-visibility: hidden; I set upon the button to prevent the transitioning div from flickering. It looks like when pages redirect, those div are turned "backfaced" before being replaced by another page.
I have one page inside of another using an iframe and when I call .dialog from within the iframe on Mobile Safari (4.3 and 5.0.1 are all I have access to) the iframe scrolls to about half way down the iframe and the dialog box is displayed a little above half way down the iframe. I've been able to get the dialog to appear where I want it using the .position function but the iframe still scrolls to the half way point of the iframe at least the first time.
Can anyone lend a hand on trying to figure this out?
I'm creating a web app exclusively for the iPad/mobile-Safari. The homepage is a run-of-the-mill HTML/CSS page with 3 main sections. But once you click on either of the 3 main buttons, you are directed to a page constructed with 2 iFrames (one on top for Nav, one on bottom for Content)
The problem was that before either of these 3 pages loaded there was a quick flash of white color and then the page loaded. I tried hiding the visibility style of the iframe and then onLoad change it to 'visible' and that worked. But it worked only once, when the iFrame-constructed page first loads. Once it loads and I click on a link on that page, the white flash is back because the iFrame has loaded already so it's already visible.
I tried the obvious like adding a css style to the iframe with a background color (also tried an inline style) but the same thing happened. Any ideas on how to solve it? Thanks!
You can do this cheat:
<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>
In the content, you can catch all link and form:
document.getElementsByTagName("a").addEventListener("click", function(e){
window.top.document.getElementsByTagName("iframe")[0].style.visibility = "hidden";
});
Explain:
First time, your iframe is hidden, and you can see the background of your main page (not white of iframe)
After loaded, Javascript will make iframe is visible and you can see content and background of iframe.
When click a link inside iframe, a trigger will fire, and Javascript will hide iframe again.
I met that problem, and that a whole day to trying to fix, but I cannot except above way. You can meet that issue on Chrome, Firefox, and other browsers, not just on Safari Mobile.
I think the same with KimKha. But "visibility" does not work well sometimes, so I think using "opacity" is better.
<iframe src="..." style="opacity:0;" onload="this.style.opacity=1;"></iframe>
I came across this issue, found lots of solution like KimKha mentions..
None of the solutions assist in further page transitions in the iframe and hiding it really is not a good solution.
With lots of trail and error I came up with the following which fixed my IOS webkit iFrame transition white flash issue, ironically it's such a simple solution:
Just add this to your CSS
html{background:#000}
change the colour to your desired color.
It looks like what the ultimate issue with IOS webkit is when your iframe calls another page, IOS removes the body from the current page for a split second before rendering the content from the new page. by forcing the HTML to have the background colour (default will naturally be white) this fixes the white flicker.
Also note that if your server is set to not allow caching of the .css file providing the styles then you will always get the flicker.
In apache to ensure caching look at
ExpiresByType text/css "access plus 30 days"