Im facing an strange issue with IE9. I see lots of random black borders in my page even thought they are either box-shadow or simple border: none. Im using windows in Parallel Desktop in my iMac. Is it just my computer or its a common bug?
It's not giving me any issues in IE9 or Google Chrome; it must be your computer.
It is an issue that we recently experienced with IE9, and if you are seeing it, there could be a good possibility that many others are too.
If I remember right, I think we resolved just by applying
img.class {
border-style: none;
}
for the appropriate classes/id's in CSS - it's probably worth playing around with this just to see if you notice anything change in your browser before ignoring the issue.
Try testing by applying the above to every image on the entire site, then you will see if it is resolvable from this method.
Related
I have a site that has a moving svg that follows the cursor.
spitfire-x-warp.netlify.app
It works fine in Chrome and Safari but in Safari (ios and desktop) it glitches out. There are some strange squares that appear around the edges of the object. I'm not sure if it's aliasing or what. Perhaps an optimisation bug or something?
If anyone has any idea how to fix this I'd really appreciate it.
Many thanks
Update on my progress:
I narrowed the glitching down to being a result on the filter:blur() I was using on the svg. This seemed to be causing a really high drain on the CPU which I've since read is quite common for blurring elements.
Although the effect is still a little janky, I was able to dramatically improve the page's performance (especially in Firefox and Safari) by switching to using an SVG filter rather than a CSS filter.
Use the will-change: filter CSS property on the blurred element. This tells Safari to use less optimizations when rendering - I would guess that Safari "cheats" in a way when rendering the blur filter.
I got some text with
font-size:9px
But it is displaying correctly in Safari and Firefox but not with Mac/Chrome (V32).
Left is chrome [bad] / Right is Safari [correct]
I can see in the code inspector that my font is 9px but chrome switch to 10px :
I heard about the minimum font size in chrome and tried to disable the auto adjustment by following style but did not work.
Any idea?
* {
-webkit-text-size-adjust: none;
}
i can only tell WHY it's not working but this might help you to go looking for a different way to solve your problem.
from chrome version 28.0.1500.11 chrome doesn't support -webkit-text-size-adjust anymore. (changelist is here: http://trac.webkit.org/changeset/145168). and safari follows along. on newer mac os versions text-size-adjust is already gone too.
I have problems with it as well, since i've built a whole website on rem units to make it not only responsive but totally flexible. this worked pretty nice but all of a sudden everything is huge now. i'm working hard on a solution for this, but if anyone has an idea i didn't think of i'd appreciate that very much.
as soon as i find a solution i'll come back to let you know.
I am just about to wrap up my first ever major web development project after teaching myself to code over the past couple of months. However, I am still struggling with a couple of the basics it would seem.
I have a instance of the page loading completely differently on Firefox than it does in either Safari or Chrome.
You can see an example of the page I am referring to here: http://fmhgifts.com/home-office/ but I have included some screenshots as well to demonstrate what I mean. First off here is it displaying correctly in Chrome:
and then here is the exact same page as it renders in Firefox:
I have spent some time trying to play around with the web development toolbar in order to diagnose the problem but so far have been unable to do so. If someone with more experience would be able to help me with this I would be insanely grateful.
The problem is that you're using -webkit-transform, which is specifically intended for webkit-based browsers (Firefox does not use webkit, and neither does Internet Explorer). There are a number of ways to achieve a grid without -webkit-transform. You seem to be using one such way already: the top and left CSS properties (there are also bottom and right properties). Play around with those.
Just try remove float:left from
#filter-bar {
float: left;
margin-bottom: 35px;
}
rest i think it will take care on its own . Try and let me know . since its a floating elemnt the other divs are getting pushed up rather than being dow . Firefox is actually right in that sense . u will need to re adjust chrome styling making it uniform for all .
For some reason, on this page, in Chrome 17, CSS3 transitions aren't working the first 3 links in the footer/nav: http://jacob.bearce.me/index2.htm. The links are exactly the same, no added classes, and I went through step by step to figure out what it was, it's changing the HREF property that breaks them. For some strange reason, services.htm works, but projects.htm does not. I have absolutely no idea why.
UPDATE: Tested in Firefox, Opera and Safari it seems to be only a Chrome issue. It makes no sense. It's not even a webkit issue (unless Chrome's got a newer version than Safari).
Sorry if this response is slightly late, however, I'm currently on Google Chrome 16.0.912.63 beta-m and I have the exact same problem as you do. In fact, on your website, out of the 4 links below, it is only the home link that doesn't seem to be working too well with CSS3 transitions (on my side).
On a website I'm currently working on, the transitions seems to only work on some links and not others. I can't really see any trend to understand what causes it. Strangely though, when I visit your website or mine through Incognito, everything works well. It doesn't work even with my extensions disabled.
It looks to be bug with Chrome. I've figured out that it's definitely an issue with :visited links, but can't fix it no matter what. In incognito mode you don't see the issue because Chrome isn't logging what links you've visited. From what I've seen, it looks like it's an issue in Chrome 16 or higher. Hopefully they'll fix this in the next release, but for now, we'll just have to ignore it.
Has anybody else encountered this. Whenever the images are intially loaded by the browser it only shows the last-half of the image. Then when I mouse over anywhere in the green section it immediately displays the rest of the image.
What you're seeing here is a <div> with a background-image and a <img> located within said <div>.
I'm encountering this issue using Safari 3.2.3 for Windows and my colleagues have seen this using the Mac version. None of the other browsers I have tested this in seem to show the same bug. I've tested in IE8, IE7, IE6, FF3, Chrome, and Opera.
Let me know if you've heard of any fixes. Thanks.
Safari Image Bug http://www.pixelwhiskey.com/images/safari_image_bug.jpg
Try using PNGs instead if GIFS
I've seen issues similar to this with IE rendering solved by setting height: 1% to the affected div or to an element nested within it. I've never seen it in Safari though.
Inspect all of the elements near the image in Firebug (yes, I know the problem is in Safari) and make sure none of them has the wrong size for any reason, and none of them has excessive padding that encroaches the image you're not seeing correctly. Also, try setting overflow: visible; on the style for various elements in the vicinity; I've seen mouseover flickers in the past, but nothing that couldn't be overcome with CSS.