Hi
I have a meter bar as seen on http://ourplasma.org but it is having a slight issue along the right side where the background is getting clipped as seen in http://d.pr/1UgN
It works fine in Firefox.
Any ideas?
From #meter, remove width: 100%.
Looks "the same" in Firefox, and fixes it in Chrome.
Related
I stumbled upon a weird behaviour in Safari today, and I cannot figure out what causes the problem.
When creating an animation that rotates an SVG element in a certain pattern, with everything working perfectly fine in Chrome, Safari only shows half the SVG on every animation step.
When I remove the background-color: white; from the .container element, everything works fine. How would a background color be causing such a behaviour?
Here's a demo video as well as the corresponding JSFiddle:
JsFiddle: https://jsfiddle.net/04zgmbup/
Chrome (expected):
Safari (unexpected):
Okay, so apparently I got this problem figured out.
Safari seems to be handling the container background as a plane.
This means that when the item rotates, one half will always get rotated behind the container, which has a white background color which covers the element itself.
I still do not know why other browsers do not behave like this.
A possible solution for Safari could be to translateZ(width /2) the element, so that all rotations happen in front of the background plane.
Here's the updated fiddle, working in Safari:
https://jsfiddle.net/04zgmbup/1/
The problem can be visualized nicely by giving the container a semi-transparent background color. In the below recording, one can clearly see that half the circle gets rotated behind the container.
I have a scrollable div and was trying to implement shadow on top of the div when scrolling the div.
I found this simple implementation on codepen :
https://codepen.io/bennyzhao/pen/iGoBm
This example did work for me, but after I was playing around, I discovered something strange with the behavior of background-attachment: local when direction is set to rtl.
I've created a very simple example on codepen to show the strange behavior :
https://codepen.io/Ron537/pen/ZLaqoG
I've noticed that the problem exists in Google Chrome but works fine with Microsoft Edge.
Here is an image comparasion :
Chrome vs Edge
As you can see, with Google Chrome the background not occupies the entire div width, but leaves some blank space.
Is this a known bug?
Is there a solution for this?
See this link:
http://lsp2.tpdserver2.co.uk/test.htm
Displays fine in IE/Chrome but in Firefox (6.0.1) there is a 1px border around the blue header.
If I add a background color to the #header-content, the 1px white border dissapears. This seems crazy.
I cannot work out what is going on with this and the related page I am trying to build depends on not having a background colour for the 2nd fixed container.
Here is an image of the problem I see:
Link to Image
It is layout rendering bug in Firefox. This bug was already reported and as I know it is fixed in next release. Only solution I know is to use opacity:0.9999999. It would render correctly as opacity:1, but fix this annoying bug.
Try #header { opacity:0.9999999; }
Bugzilla : Bug 677095
EDIT: Firefox 8 is not affected with this bug and setting opacity to 0.9999999 will result in weird border around the element, so I prefer not to use it anymore
Browsers add different defaults if you don't "reset" the CSS, that may be what is going on here.
If the z-index value of your #header-content is not greater than 10, then the bug is fixed. If it's 11 or greater then I can see the mysterious gap too.
Really weird.
I cannot reproduce in FF 6.0.1; however, you can probably work around this with
background-color: transparent;
on the #header-content, or white if you don't want it being see through.
This should still give the fix you mentioned while remaining a blank div as required.
Update:
Ok thanks for the screenshot, still cannot reproduce, this time with ff 6.0.2 - I had a look around after noticing I can reproduce a similar issue on different zoom levels.
Blog post explaining the zoom border bug, which includes this test page. I am not sure if this is involved, seems similar but not the same thing, zoom bug will take off a slice of the whole page including the border of #header-content.
As for your comments around transparent, you can use it and still supply a background image, does this not work for you?
I have been pulling my hair out on this one all day, and I'm hoping someone smarter than me can figure it out.
I'm working on a new design for my site, and I've run into what appears to be a Firefox bug. I am using background-attachment: fixed for a gradient on the <body> element and then I have a full width <div> with another background image at the top of the page. Only in Firefox, there is a small white border at the top of the page and on either side of the <div> background.
I've tried at least a half-dozen different ways of coding the HTML and CSS, and they all produce the same results. Also, the white gap doesn't appear to be there in earlier versions of Firefox (I noticed it in version 6). I even did a clean reinstall of Firefox without any add-ons, and I'm still seeing it. Any ideas on what's causing this? Is my code wrong in some way?
See simplified test case here: http://mygemologist.com/bg-fixed-test.html
Note: This question may be related to: Crazy CSS Issue in Firefox Only - position fixed and background color, but I'm not sure on that.
Dominic, see https://bugzilla.mozilla.org/show_bug.cgi?id=677095 for this issue and https://bugzilla.mozilla.org/show_bug.cgi?id=677095#c47 for a possible workaround.
Maybe use a smaller width image? It seems firefox has issues rendering it, when zooming it goes from properly displayed to having a 1-2px white border above it.
EDIT
When I change the body css to background-position: scroll the problem seems to go away
body {
background: url("http://www.mygemologist.com/resources/bg-gradient.jpg") repeat-x scroll left top transparent;
}
There's supposed to be an image in the center under the text "GIANT MANGO". It shows in Firefox, Chrome, and IE, but it does not show in the Safari browser.
http://giantmango.com/vote-for-artist-charity-contest-44-2581
How to solve this problem?
It doesn't show up initially with Chrome 9 on Linux either. If you drill down through the developer tools, the computed style for that image shows its height and width to be 1px in both directions. If I remove the max-height: 100% from the div.post-body p img, div.post-body p object rule, the image appears.
While I can't explain this (I haven't the time to look at it in-depth) I hope this puts you on the right track towards debugging this.
On the single-wrapper div, is there a padding-top of 1000px coming in somehow, that's pushing the contained div down? (the image appears in my safari, it's just far down the page).