I just noticed something weird, when creating a menu for a website. Take a look at this Fiddle which illustrates the problem.
Notice the small orange spot, to the right of the last letter when you hover on the menu-item.
Why is this occurring?
I can tone down the "orange effect" by lowering the contrast between the foreground and background color, but it does not solve the actual problem. Is this a bug, or is there a clever way to fix this?
I'm using Chrome on a Mac btw. I've noticed it doesn't occur in Firefox, so it's a browser-related issue.
Update
Thanks for the answers and suggestions on how to fix it! I accepted Marcel's answer as this seemed to be the most correct answer as to why it is occurring. I don't know if this is the case, but it seems to be a Webkit problem. If you notice the bug in any non-webkit browser, please say so, and I'll update this.
It seems to be a subpixel rendering artifact. Adding opacity:.9999; to the CSS rules for li a seems to resolve the issue.
If you add padding-right: 1px; to the li a, the orange dot will go away and let you keep the font.
As far as why it's occurring, the only thing I could think of was that the couple edge pixels of the T were extending past the edge of the anchor's box. Adding the padding expanded the box a little, but it seems rather hackish.
If you add a background colour to anchor, you can see the edge of the T is outside the background.
Related
I've been working in this tooltip library since yesterday. I don't know if this problem is for my sleep or what, but I can't figure what's happening.
The subjacent idea about this tooltip library is simple: The user adds in any HTML element the custom data attribute (I mean data-) with the message that he wants to display in the tooltip, and it has to appear. There are some options to add, like the orientation of the tooltip and if the user wants to "cut" the words inside the tooltip.
Here's an example:
<div data-msg="Hi, I'm a tooltip with a text veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery large" data-orient="right" data-break="yes">Hover me and the tooltip will show!</div>
Everything is fine with bottom, right and left orientations, but when I add the top orientation, the browser adds a species of "border" at the bottom of the tooltip.. I don't know why, but I can't fix it.
Is strange because in the others orientations the problem don't occur.
You can see the problem in the below image (the first tooltip has data-orient="top" and the second tooltip has data-orient="right".
If anyone knows how fix this problem, I'd like to explain me what happens.
Here's the Fiddle.
Thanks,
Leo!
EDIT: I'm working with Chrome 28 version and my OS is Windows 7.
This is a workaround, not a real solution - but shouldn't have any serious side effects in this case (no guarantees, though, see below). And I have little explanation other than this appears to be a Chrome rendering bug.
Add this to [data-msg]::before:
-webkit-backface-visibility: hidden;
backface-visibility tends to fix quite a few Chrome rendering bugs, regardless of the fact that it actually has to do with 3D transforms - it appears to fix this case too.
The reason that it fixes problems possibly has to do with Chrome using a different (hardware accelerated) transition engine the moment you add anything to do with 3D transforms to your element. This may have performance penalties, which leads us to another non-sensical rule that at least used to improve performance if you run into problems:
-webkit-transform: translate3d(0,0,0);
ETA: -webkit-transform alone actually seems to be enough to fix the problem. Experiment with the two, and see if any of them cause other problems.
There have been reports of -webkit-backface-visibility crashing iOS. So do test it there, and try with translate3d instead - or disable the fix specifically on iOS (and live with the bug if it appears there).
As posted in the comments, here's a more minimal example of the problem - although it sometimes fails to... fail, it should mostly have the unwanted darker border at the bottom:
JSFiddle
The bug seems to be caused by transitions combined with border-radius and opacity. Possibly inline-block and padding have a role in the bug too, but sometimes their removal fixes the border, sometimes it doesn't. I hope the backface-visibility workaround is more consistent.
I am working on a website simkt.com and just moved over to joomla 2.5 after rebuilding the base theme to match the desired look.
Unfortunately, being a novice web developer that I am, I forgot to check out how things looked in browsers other than Chrome. The site is now live, and I quickly discovered that in Firefox/IE that the website is not quite right, and after some adjustments, that when I make adjustments to try and fix the issues, there is around a 5 pixel difference in spacing between Chrome and Firefox/IE (and I tested now in IE 7 and it was.. quite bad).
So, my question is, what am I doing wrong, and how can I go about fixing this?
Using Chrome dev, I reduced the top-padding in rt-body-bg to 0, and in the logo itself, decreased the top-margin to -30 and bottom-margin to -25 and it looks close to what I want, but has a 5 pixel gap between the logo and the menu on Firefox, and in IE the login button starts to move off in some odd direction.
I know some css/php/html but am I am still learning, any help would be greatly appreciated!
Thanks!
Note that different browsers have different default values for the css for the different elements. A good practice when you program design with CSS is to use a reset values in the beginning of the css file. This reset is going to make sure that the unset values will be the same for every browser.
See this link for a css reset code
http://meyerweb.com/eric/tools/css/reset/
Hope it helps
As #Stoyan said, you should be using a CSS reset at the beginning of your CSS file.
You specifically mention margins. I've just had to resolve an issue whereby in our site margin-top was used to position items (not a great idea - blame the previous developers). In IE and Chrome it was fine but in FireFox, because it has a different top margin, it looked bad (items were 30px too low).
I didn't want to use an entire CSS reset because it might have had a knock-on effect for the entire site (fonts were all changed for example).
I used just one item to resolve it, curiously not margin-top but line-height:
body {
line-height: 1;
}
I've been wrecking myself trying to figure out what is going on with this big of html. It renders correctly in latest Firefox, Safari and on chrome canary, but normal chrome renders these weird lines and I have no idea why.
I've create a JS fiddle with an excerpt of my code, it's part of a much larger project, but I'm seeing the rendering issue in the fiddle as well as in my app. I've attached a screen shot of what I'm seeing in the fiddle for reference.
Fiddle
Bug screenshot:
The red middle line shouldn't be there as well as the line to the left of "close". This is just one example, as I mouse over the modal I get lines appearing all over the place.
It makes for a less than stellar question as it's difficult to replicate. Resizing the browser helps to show the error. My fiddle has quite a bit of html and css. I don't expect anyone to actually comb through it and fix the issue. I just want to be thorough in presenting the problem.
I've tried looking online but I haven't been able to find anyone reporting the same issue as far as I can tell.
If anyone has any ideas on what may be causing this, how to fix it or point me to a relevant link/SO question I'd be very grateful.
Things I've ruled out/investigated:
- not caused by something else on the page, as I extracted it into jsfiddle and it's still hapenneing. I also removed the body content using the console in my app and it didn't make a difference.
- I dont think the gradients or transitions are causing it, as removing them didn't seem to have an effect
- possibly/probably related to absolute positioning? When I removed the position absolute on the main wrapper element I didn't see this occuring.
- I read that applying a z-index to these elements might help, but it did nothing for these issues.
TL,DR: Why does google chrome, but not canary or safari, show rendering errors on absolutely positioned elements with liberal use of css3 gradients, shadows and transitions?
When I remove the '-webkit-transform: scale(0.95)' on #vfs_uploader and the '-webkit-transform: scale(1)' on #vfs_uploader.visible, it displays fine: http://jsfiddle.net/cjc343/fzqPT/2/
I don't know how this affects Safari or if it has other implications in Chrome, but it does not appear to otherwise affect the layout in the example.
so ive been working on a small nodejs project and some of my users recently see weird black bars on it, i have no clue what might cause them and i cannot reproduce them at all.
here is a screenshot:
their browser version is Firefox 9.0.1
does anyone have an idea what might cause them?
update:
the problem still exists, i made one of the users turn off his javascript and he says that he still sees those black bars. i also made him install firebug and he says that he cant select the bars - only the elements underneath them. (dunno if he did it right though)
its quite strange, the only elements he sees right from the start are the ones which i positioned fixed.
ive been able to reproduce the bug on my laptop and found out what was causing the black bars:
my header had an overflow hidden attribute and as soon as i removed it everything was working fine again.
but i still dont know WHY this would happen. i'm using a linear gradient as a background in my header and a heading with multiple text shadows.
maybe this caused the bars on certain graphic cards.
I have a fairly far-out box model for my portfolio website. It's actually really not but it required a little CSS magic to get the chamfer corners to work (I really wonder why chamfer corners do not exist in CSS). See it here.
Now, if you're on Firefox, and you navigate to my resume, you'll see a very mysterious margin going on at the top that I just can't seem to figure out. I was wondering if anyone could poke around with the Firefox dev tools and possibly figure out where this is coming from because I can't seem to figure it out. You may also notice a few other little graphical glitches on Firefox that are not present in any other browser, but hey, what can I say, I like that box look and I ain't gonna compromise.
Image depiction (from FF7.0.1, win7):
Add display: inline-block; to .box_content.
Not sure whats causing it but that should fix it. At least it did on my computer.
Validate your html for that list of errors that needs fixing. Then validate your CSS. I didn't run through that.
I rebuilt the "resume" section from the ground up. During this process I noticed a lot of margins being added to titles and such before I would edit the CSS classes that weren't added in other browsers. Margins seem to affect the "height=100%" rule as anyone whose tried to get a footer to stick to the bottom of their webpages might have figured out. So I chalk this one up to one of the titles getting a margin from one of Firefox's standard CSS stylesheets, I just couldn't find it.
Lesson of the day: ALWAYS set padding and margin to 0 for any custom class or id!