I have discovered some problems when I run a page with dark background and image element with some white borders in IE8. The problems is that a white flicker and flash apperas in the top, middle or bottom part of the image when reloading or load another page. I have serched a lot and found a kinds of code to put inside of meta tags, but nothing works for me. Is it really that bad, that a dark background and white borders create this problems in IE and there is nothing to do? Or what could I do to get rid of this flicker and flashes?
The only thing I can think that it would be is a resurrected IE6 bug.
Have you tried fixing that and seeing if that works?
Related
I have some photos on my wordpress website and for example this cross in the circle gets a weird border around the image but only on some resolutions (e.g. width:1506). I tried inspecting the element and there is no CSS border in there. Somehow this border appears around many images for some reason at specific resolutions and I can't seem to find out why since there isn't any CSS stating that this border should appear.
Also looked in dev tools at Computed for this img and it says border:0; and I also set it 0 again myself but this still appears.
Any help would be appreciated!
Found the answer. I had a .webp image which was mostly transparent and a background was set to make it purple. On some resolutions that box appeared with the color of the background. The solution I took, was make the webp directly purple and saved it as a png and replace the old one.
I have converted a badge/image from PNG to SVG in order to be able to re-use the asset in various sizes etc.
The problem is that depending on the specific webpage i'm embedding the SVG on, it either looks super crisp (as intended) or looks bad with some sort of anti-aliasing gone horribly wrong.
Even on the pages where the SVG looks crisp after load, I only have to scroll the page a bit until it looks horrible as well.
Please look at the screenshots below to see the exact difference on the BADGE (SVG):
It seems the browser only messes with the SVG right where the SVG meets the image behind it. The SVG is only slightly transparent in the gray center, so that should not be the cause of it.
I have tested in Chrome, Edge, Safari which all do the same thing.
Does anybody know what might be the cause of this?
I found a fix to what clearly seems to be a somehow undiscovered big bug in all modern browsers in regards to handling SVG through CSS as a background on an element overlapping another element with background/image.
The fix for my case was simply adding a background-color to the element. Since the element is completely round I can simply make a border-radius as well, so the background will never appear.
If the element however was not a complete round circle, this would not be a workable fix.
I have been editing the code of my Tumblr theme and realized that something causes one of the tags to have a gray color background, but i cant find which part of the code is causing this. I used Inspect Element feature and it doesnt reveal the problematic code!
It is perhaps worth mentioning that this happens only when I'm visiting the page in Google Chrome! IE and Firefox show no gray background.
Here is the link to the page http://xziii.tumblr.com/
What do you think is the problem and how can i get rid of it?
Can you please show us any screenshots, because I can't notice any grey background element in the link you provided. Maybe it's being caused by an extension.
I can't reconstruct your problem, there are no grey bars. Are you using any browser-addons or extensions that could cause this problem?
I have a website I have just built. Everything looks reasonable in Mac browsers, but in windows browsers such as IE there seems to be some rendering problems in terms of very thin sketchy white lines in between where the main header image butts joins the surrounding background image, and also between the background image and the surrounding background colour. The images were created in photoshop. I'm probably not explaining it very well, but please take a look at the site. The link is below. Thankyou
http://www.eve-tattoo.com/index.htm
These are img artifacts. Here's the fixed jpg: http://i.imgur.com/O6rtiZ2.jpg
I have a site that works fine in android browser, FF, Chrome, Safari IE9+ but in IE8 the upper half of an elements background disapears as well as the background color on a couple of input elements.
I have run through IE debugging tools and also W3C and there is nothing that is coming up that would make this occur.
The site in question is http://ukritic.com if anyone can check it in FF then IE8 and maybe suggest what could be causing the problem it would be greatly appreciated.
If you need anything from me let me know and I will post it up for you.
ADDITION:
The problem that is occurring is that in IE8 the white background containing the content is only visible 1/2 way down the page but is hidden on the upper half of the page and also hidden where the facebook like box is located.
In all other browsers the entire content container shows the #FFF background from the top of the page to the bottom of the page.
We have tested in IE compatibility and normal mode but the problem persists.
What I do notice is that while the page is loading the content container is white but as soon as the page loads completely it disappears on the top half and the facebook container.
Thanks
~M
The problem was in the border-radius.htc file as soon as I removed that call the page rendered perfectly.
There really is no effective way of rendering round corners on ie8 as the .htc file needs a relative path to the page that is rendered which does not really work well with dynamic depth address bars (shortUrls).
Guess I will have to settle for rounded corners only in IE9+ and all other browsers.
Thanks for the input