I am having some problems with white 1px border when transform: scale occurs on it or when the width of browser changes. It is visible only around first and third block (yellow one and the one with the 'H' letter on it) and ONLY in chrome and safari browser, in firefox everything looks good though!
I was looking for similar topics and I realized that a lot of people had this problem but actually there was no answer that could help in my case.
-webkit-transform:translateZ and -webkit-backface-visibility in CSS did not work.
Here's an url to a site:
http://wemakeithappen.pl/connect/
Thanks a lot for help! I hope someone can fix it:)
Related
I am struggling with a strange problem for a couple of days now. I am using big triangles in my website. I know if i make triangles in png or any other format, there is a big chance this is gonna look crispy. Thats why i go for the svg approach.
The first thing i approached was a big border under the svg elements. This was fixed by simply adding vertical-align: top; to the svg element.
The problem is that it is very buggy in some browsers. Some browsers show a line beneath it when resizing. Sometimes the line is always there.
The following image illustrates the problem, this is taking in safari 10.1 when resized:
This is how it should be
The svg are absolutely positioned i
Is there anyone who has faced this problem before and can help me out with this?
Thanks for you're help guys, really appreciate it!
I ended up with a (dirty) fix.
The elements that are aligned to the bottom i gave a transform: translate(0, 0.4px);
And the elements that are aligned to the top i gave a transform: translate(0, -0.4px);
For now this seems a good fix without disrupting the layout!
Issue only relevant for Safari browser.
A picture is worth a thousand words, so here's a screenshot:
As seen, the problem is with a bottom border extending too far right. This seems to be an issue with the original template. Yes, I've contacted the designer, but it appears they're of little help (even after purchasing the $10 "quick help").
Interestingly, when viewing the demo with their global site navigation, as seen here the border is contained correctly, however, removing the top black navbar will produce the issue.
How can i fix this? Is there someway to implement the black navigation, but do so invisibly? Can I fix this with css? Please Advise?
In your screenshot I can see you have padding: 50px 100% on your .txtabs-content div, the 100% could be adding the unwanted padding, this should probably be padding: 50px auto.
Although, you should post some code and if possble, a JSFiddle so this can be verified as the issue.
I am sorry for all of the confusion and wrong post type. I will keep playing with it or try to get all the css in order so I can paste it correctly on here.
Thanks for the info and help that you were able to give.
Grady
I am not sure if anyone can help me but for some reason I can not figure out why my nav bar has a 'shadow' without any shadow tag. It is very annoying and I can not figure it out. I am able to change the entire navbar to the same color as the background but then it does not stand out. If you can offer me any advice or things to try that would be great!
Here is a picture of the nav during regular view and then I zoomed in and took another shot.
https://dl.dropboxusercontent.com/u/11217802/nav%20bar%20issue.png
I have tried border: none and box-shadow: none but nothing seems to remove that little overflow.
UPDATE:
I should have posted this to start with. I do not have the complete html/css as I'm using wordpress so the code is not exactly mine to share. You are welcome to view our site here, http://jrummy16.com/test/
I have just been using the console in Chrome or Firebug in Firefox to style it to that point.
Thanks in advance
Grady
This has nothing to do with overflow or box-shadow. What you are seeing at the edge is just the continuation of the background of the parent element.
You can fix this by correcting the positioning of your blue support nav so that it properly aligns to the far edge and doesn't leave the small section showing at the end.
EDIT:
Looking at the actual code, there are two "rogue" pixels that account for your excess right spacing. The first pixel is from the border from css line 394:
#mainmenu.scaled li.menu-item a {
border: 1px solid #E2E2E2;
}
You can either leave this here so the 1px border around elements stays constant, or you can remove it from your last nav using the :last-child pseudo-selector to set border-right:none;
So second rogue pixel comes from a clearing div that you have in the navigation. Deleting this div and applying a CSS clearing fix seems like the best solution. A basic clearing would be setting overflow:hidden; on the container element, but there are more robust css clearing you can use if your situation calls for it.
My guess is it's your padding on your grey box. Set padding:0px; on that get box element and see if that does it.
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;
}