I am currently having an issue in chrome with a webpage I am working on. When the page loads, there is an odd space after an inline element.
Usually this would be caused by a margin, or some padding. What is peculiar about this issue though is that it isn't. If I disable a CSS rule then re-enable it, it fixes the issue.
The issue doesn't happen in Firefox, so as far as I know it is chrome specific.
Any help or suggestions would be greatly appreciated.
Screenshot of said issue: http://imgur.com/pIjeXnV,UEPWRiB#0
I've solved this issue by having javascript change the css after a short delay and change it back. This emulates the solution that I mentioned viewing through using the inspector.
Since this is more of a work around than a solution, if anyone has any more information about the issue, feel free to comment.
Thanks.
Related
The website I'm working on has issues with how the text is displayed in Google Chrome. I added text-rendering:geometricprecision to make it look better, but apparently it caused some text rendering bug. See this and this video. Any ideas on what might be wrong?
Adding -webkit-backface-visibility: hidden solved the issue.
Unfortunately I can't reproduce this in a JSFiddle or otherwise, when I do it simply works properly. From there I still was not able to narrow it down to figure out what is causing it. Here is the link to the development site:
http://dev.fusion-inc.net
This bug is only visible in Chrome, I am using the latest version, and the problem still appeared on the previous version (I just updated this morning).
Watch the links in the content of the home page carefully, when the image slider transitions, you will see a change in the text of the links. It's almost as if the anti-aliasing changes somehow and causes the text to become just a smidge thinner. You may need to zoom in to see it well.
Any idea what's causing this? I'm completely stumped, the only thing I can figure is something in the rendering of the animation of the slider is tweaking some anti-aliasing or something causing the fonts to move a bit. Even the youtube and linked in images in the footer have the same problem.
#content * {-webkit-backface-visibility: hidden;}
The above fixed it thanks to someone in Chat.
Similar problems should reference this link: Prevent flicker on webkit-transition of webkit-transform
The position:fixed s works perfectly fine when I do not embed a video from Vimeo. Any one knows why and how to work around it? It never used to be like that, only recently.
Does this question's discussion solve your problem? Mac, safari, background-position:fixed and iframe?
Original poster stated: "I worked around this by detecting Mac/Safari and outputting decreased functionality for the people using that system."
I would recommend implementing separate CSS for whichever browsers are causing the issue. Can you provide more details about the problem?
My client is starting to get antsy....so any help would be greatly appreciated. I am having issues with my secondary page header images shifting. It is displaying correctly in Firefox, I haven't been able to check in IE yet w/out access to a PC. It was displaying correctly in Chrome, but shifting in Safari.
I added the "webkit hack" to write a specific css style for Safari, but once I did that....it started shifting in Chrome. What can I do to fix this issue??
http://airwavetelecom.net/beta/?page_id=2
There's some problem with the way you're using your .clearfix class that I'm not sure of. If you add a clear:both; to your .page_line class it will fix your problem.
You could parse the user agent and pass a different CSS file based on the result. However, it seems like a weird issue that shouldn't happen with proper CSS; can you post the specific bit that doesn't work?
By the way, you should read up on animation queue in jQuery! Hover many times on your menu and it'll keep flashing for a while.
The repositioning of .page_about is pretty odd. Why don't you just use .custom_title for the entire header? That wouldn't require such odd re-positioning.
I am pulling my hair trying to find a fix for this problem. If you go to this site you will see that (under IE) the slider and the menu on the top is broken. Works fine under all modern browsers.
Any idea how to fix this? Thanks.
Edit: Want to add that the original site design works fine under IE. I did a massive amount of editing under the hood and somewhere along the line this one was broken that I can't seem to find a fix for. Since I did a lot of customization, I think it seems unfair to ask the original author for a fix (and he is not very responsive either).
The document invalid. In particular, there is a <style> element before the Doctype. This triggers Quirks mode and causes browsers to become very inconsistent (e.g. IE emulates a log of bugs from IE 5.5).
Always work in standards mode and perform basic automated QA.
I can't check it for you, since I've not got access to IE right now, but I've often found that adding position:relative to misbehaving elements is something of an IE magic bullet.
No fix but a lead: the issue with the menu bar is one of IE's mysterious float positioning bugs, as can be demonstrated by putting <div style="clear: both">xxx</div> after the navbar ul. (Note that it won't work if the div has no content!)
stuff about box model deleted: as David Dorward mentions this is caused by quirks mode, and moving the style down past the doctype causes the slider to behave sensibly.