i'm developing an app for Windows Phone 8 with HTML5, CSS, JS, ...
Looks like the default background color of the browser is always white.
So it flickers every time when i click on a link to another (HTML) page (all my pages have black background).
I know i could just use one page and put all other pages into own divs and switch between them with JS, but i would love to use singles pages instead.
Any ideas?
Thanks!
Setting the background-color to black does not work?
I've faced this problem quite often myself, but only on the initial loading of the control. The best solution I found until now is to set a negative margin to the webBrowser control and register to webBrowser_Loaded event and then set the margin correctly. Do this for every navigation and you won't experience the white flashing.
Unfortunately, only setting the visibility property does not work, because rendering the webBrowser-control also makes it flash white.
If you still experience a slight white flash, you may want to set a small wait of about 50ms.
Related
I got my jQuery Slider and Spinners project completed, and when I spoke with my client he sent me a screenshot of the slider in action, but around the handles labels there is an orange border. He is using Chrome and I designed this in IE and there is no orange border around the slider handle's label.
Is there a reason for this? I have tried adding
border:none;
to the CSS in the label area but I'm not sure that is going to get rid of the orange box. Is there a way to make sure that there is no orange border? and when it is used in any other browser that it doesn't have an orange border?
Thanks
Keeping it simple..Well, different browsers render components differently..
For instance, IE and Chrome display 'Alert' messages very differently.
Say, the component might even look different in different versions of the same browser.
It is very difficult, if not impossible, to have ditto UI in all browsers and all versions. As you said, you could play around with CSS to get the same look. But, I have experienced this, a new browser update and everything will be in shambles..
Best Practice.. Throughout the application, in a particular browser, the components should look similar. If it has an orange border in page x, it should have the same in page y too..
I have a bit of a IE8 problem (sound familiar?)
I have a button. when you hover over the button the hover state produces a larger box that has html inside. in this particular case, it's a small music player.
so it goes like this, when you hover over the button it produces a small music player with clickable links and some text. you can move your mouse anywhere inside this box, but as soon as you leave the box/music player, the hover state goes away again.
sorry but I don't know how else to explain it.
this all works a treat except for IE8.
in IE8, the hover state disappears as soon as the mouse leaves the original small button. so navigating around the music player becomes impossible.
now I have noticed that when there is no html in the hover box, it works fine, but when there is html (in this case an iframe) it loses the hover as soon as I touch any html inside the hovering box. so it looks like the problem is not the hover box, but the code inside the box that makes it lose focus
what I would like to know is, is this a known issue in IE8, or could it just be bad coding from my side. in which case i can post the css.
I've had problems with :HOVER states in IE8 too and I noticed that the same CSS (even pointing to the same external CSS file) worked on some pages but not others. The solution for me was to consistently add a DOCTYPE to the top of all pages (above the starting HTML tag).
It seems obvious now, but sometimes (especially when editing old sites) the DOCTYPE is not always specified.
I hope this helps!
Your problem doesn't seem to lie in hover itself. Firstly you assume some window height and your project just look weird if the height is different. Assuming you did some very exact calculations on such assumptions your problem is probably the box model problem. box-sizing:border-box might help, but you would have to recalculate everything.
Also you can use timeout before the elements gets hidden/drop down so that micro mouse movements don't shake elements and maybe allow to "catch" them.
Having both things in mind all hovering problems should be fixable.
EDIT: For iframe hover have a look at: Iframe hover not working in IE (all versions).
I've created a web page, and it has 7 six sections with huge background images using background-size: cover;. It works fine in all browsers except Google Chrome (All versions/All platforms). When I try scrolling the page in google chrome or click on its links (which they also scroll the page using $.scrollTo) the page gets choppy and laggy and it scrolls slowly and uses 100% CPU.
I've uploaded the page so you can test it: http://baaemail.com/beta (I'll remove the page later). Even IE9/10 is fine, but chrome gets choppy.
The page has several "scroll" events bound to it and I have tried disabling the javascript altogether but it doesn't get better so its not from the scroll events.
I'm using background-size: cover because it shapes the photo exactly like I want it to and I want the image to be fixed that's why I can't use other methods like using img tag instead of backgrounds.
What should I do?
thanks.
A solution I found for myself for a website with similar behaviour was to add background-repeat:no-repeat css property for those divs containing huge background images.
You can also check if you have a background image for body or html that is repeated, for me the big problem was a repeated pattern image that interfered considerably with google chrome's scrolling performance.
Also if you're using CSS transitions on those "slides" you should check that those are not assigned to "all". If you're having a transition only for the "left" property there is no point assigning it for "all".
I'm not sure if this alone will help you but it is always a good practice to compress your images and your scripts.
This stuff did the trick for me. Hope it helps.
I am using AJAX modal popup in my project, but there is problem with it.
Now I decided to acheive similar behaviour using javascript
I am able to show popup using
document.getElementById('dv').style.display = "block";
Now I just need, how can I make background disable like in modal popup?
you create a div that spans the whole page but initial style is display:none; along with any other styles. i.e transparency 80% with background colour of black..
When you show dv change the display attribute of the div (above). Just make sure that the dv has a higher z-index than the background div and the background div has a higher z-index than the content on the page :)
Have you considered using a library for this? The most programmer-friendly and flexible I have found is NyroModal (jQuery based). The advantage of a library is it will deal with many subtle things that happen with modal dialogs, e.g. ensuring it works effectively across all browsers (and overcomes the various quirks around things like positioning), animating on and off, lightbox effect around it.
NyroModal lets you generate dialogs dynamically, whereas most libraries are geared owards simpler use cases such as "make all images clickable so they show up as lightboxed when the user clicks on them".
I am getting a number of strange rendering issues in IE6/IE7 when there are transparent backgrounds applied to the elements involved.
They have included but are not limited to:
When scrolling back up a page a background image appears moved as if padding is applied.
When hovering over a link the background image applied to its containing div appears to disappear.
When using a drop down, hovering over a containing element of the drop down closes calls the mouse out event.
These are just 2 of the 7 I have had to fix so far and as you can see they are unlinked and a pain to debug and I am sure there will be a number more that I will encounter before this project is over.
To stop I have modified a default CSS rule that was setting nearly all elements to have a default image of "spacer.gif" - a 1KB 1x1 transparent image.
Old:
background: transparent;
New:
background: url('../images/spacer.gif');
However I am now worried about the overhead this could have on both the server and client machines. Such as increased loading times (and load on the server) caused by downloading the spacer.gif for each element from a "dumb" browser and a CPU hit on the client side when scrolling through the page as it has to render the additional images.
Are my worries justified and if so how can they be rectified? Or am I just worrying over nothing and this is an appropriate fix for such a stupid issue??
tl;dr - transparent backgrounds on elements (NOT images) causes issues caused by the way they are interpreted in IE. This is not a rendering of images issue this is a IE-logic-fail issue.
Thanks in advance.
I use this css hack for giving IE < 7 a gif file and everything else a 24 bit png with transparency.
background-image:url(/images/sprites/icons-sprite.png);
_background-image:url(/images/sprites/icons-sprite.gif); /* IE<7 gets the crappy icons */
IE 6 supports gif transparency just fine.
Depending on the scale of things really determines how much it'll affect your server load. Ideally if you're planning on making this a significantly big deployment you should already be doing the most suitable standard methods of handling static content: cache headers, separate (sub)domain for static content, reverse proxies, CDN deployment etc.
In terms of the CSS, you either have nasty hacks like Javascript or spacer images to get around IE6/7, or restrict the way you use your page styles so that these problems don't exist because you aren't using the things that cause them. It really depends on what you feel is of greater importance.
IE 6 (and possibly IE7, I'm not sure) has some weird transparency issues.
Check out http://homepage.ntlworld.com/bobosola/index.htm for the fix which I use all that time - just have to add a little javascript and convert any gifs you have to png.
Look at this article: PNG8 - The Clear Winner
You will need Fireworks for this fix. Since I discovered this writing I use it all the time. Major plus: you do not need different images for different browsers. PNG8 is good for all.