I'm having a really frustrating issue with Firefox. I just rolled out an update to my site at socwall.com, and all of the browsers look great, except for this one issue with Firefox:
Firefox is rendering a white border along the top and left edges of my fixed position header. Strangely enough, if I hover over the element in Firebug and then hover away, the issue is fixed:
Is this something I need to bring up with the Firefox team, or am I doing something wrong?
Which version of Firefox are you using?
Are you using any custom Firefox theme?
I am on Beta Channel with recent beta version 9 and as you can see in the attached screen-shot, I don't have it.
Try using outline: 0 in your CSS.
Related
I'm using rgba colors, but after switching to HEX the problem still persists. I never had this issue a few weeks ago, and just noticed it. All opacities on rgba colors are set to 1 (100%), so they should appear. I assume it's a new chrome bug?
The left screenshot is Safari where it works and the right is Chrome.
safari vs chrome link
Same to me. I found a fix! Aparently there is a bug with webkit with the backface of a div element. This code will help
-webkit-backface-visibility: hidden;
You can found more info in w3schools.com -> here
Chrome appears to have some rendering bugs. Especially after GPU Driver Updates or Chrome Updates. A friend of mine had them for months.
You could try tuo update your drivers but theres no guarantee it helps.
Same happens to me. I tried to download Chrome beta. The weird rectangles do not appear there but the background color still does not act as it is supposed to. You can take a look at my page - the blue background color magically changes itself as soon as the whole landing page disappears.
I am facing a strange problem where the a navbar I have created is displaying differently in Chrome than Firefox. Here is a screenshot of each. Firefox is displaying it correctly:
While the background colors are getting lost in Chrome:
I have created a fiddle here, but the problem is not apparent when viewed on the jsfiddle site using Chrome. In the live Chrome browser, the body declaration over-rides the definition for the navbar, even though z-index is used.. Any ideas on how to solve this strange issue? Im using an old version of Chrome right now (21.0.1180.90), trying to insure backwards compatibility. Thanks for your ideas!
Your code works fine tested in "live Chrome browser" 21.0.1180.89 (couldn't find the 21.0.1180.90) on OS X 10.8.2.
And I think you are missing the point of z-index:
For a positioned box, the 'z-index' property specifies:
The stack level of the box in the current stacking context.
Whether the box establishes a stacking context.
http://www.w3.org/TR/CSS2/visuren.html#z-index
z-index is not used to override any other css declaration.
You're code is working in Chrome version 24 , Firefox and Internet Explorer 10 . Maybe the problem is only in that version of Chrome or you override it somewhere else.
Ok, see if you can help me out with this one:
1) Go here: http://thepredatorial.com/DHS/index.php in Google Chrome/Firefox/IE9
2) Everything looks great
3) Go to the same web address in IE8
4) There is a gray background (that matches the outer corners) behind the slides of the slideshow that I can't seem to find out why or get rid of...
Any help?
Ok, I ended up fixing it on my own.
Because IE8 had crazy bad PNG transparency issues, I ended up making a png of the entire block above and below the transparent gifs, absolutely positioning it ABOVE everything, then z-indexing everything BUT the banner slides above the absolutely positioned element.
Crude? Maybe. However, now it works beautifully in Firefox, Chrome, IE9, IE8, and FOR GOD KNOWS what reason IE7 as well.
IE8 and below has issues with applying transparent effects to already transparent images. It appears your jQuery "cycle" effect is causing this: remove the flashing transparency, remove the grey background.
Since IE's dev tools are fairly crappy I couldn't easily test any of the workarounds posed here on your actual site, but hopefully one works for you: Problem with JQuery cycle on IE8
I have been working with changing the background colour of an element using css3 animations. However it does not work in Chrome. I have attached a jsFiddle example of the code I am using. It works in Firefox, but not in Chrome and despite my best efforts I have been unable to work out what the problem is.
In chrome is seems to ignore the reference to background-color only. If I move the item or apply any other effect to the element it works fine.
http://jsfiddle.net/qWKEs/6/
Thanks in advance.
This is a bug in chrome. Should be fixed in version 18 as per http://code.google.com/p/chromium/issues/detail?id=101245
I had this same issue using the background property in Chrome with CSS3.
However the version of Chrome is 21.0.1180.83 (up to date as of 8/24/12) so the problem still exists.
I resolved it by specifying background-color instead and that works fine.
Interestingly enough the W3C says it's only supported in version 1.
Take a look at this in both chrome and firefox: http://jsbin.com/imuxe3
As you see, it renders fine in firefox, but chrome literally ignores the -webkit-border-radius CSS rule when adding a -webkit-box-shadow with inset mode.
Can some one explain/get a solution for this?
Thanks
It seems to be a bug in chrome. However you can use a workaround by defining a simple border: rule.
For more Details see this:
http://code.google.com/p/chromium/issues/detail?id=29427
I wondered about this recently, myself.
Although, looking at my button in Chrome dev now, it's fixed.
So you must simply wait for the fix to the issue mentioned by #mightyuhu to be pushed to the stable version of Chrome.