This is an issue I noticed in an application that is using icon fonts through all fonts are having issues. Basically the issue is that when I leave the application in a background tab for awhile, sometimes when I come back the fonts get reset to something (most but not all icon fonts show up as squares) and when I move my mouse over the screen, the fonts are switched back to what they should be.
I have made a video to show the issue:
https://vimeo.com/86414508
Any help with this would be greatly appreciated.
It seems to be a known issue in Chrome as it's been answered here :
Icon-font sporadically shows up as squares and back to icon on hover
It's a little annoying but I guess it won't be too much of a problem since they come back when you hover the page again and I'm sure it'll be fixed in the next versions of Chrome.
Related
I should start by saying I'm no expert when it comes to code and web design. That said, I have recently upgraded to OS X 10.9 Mavericks. After updating I'm experiencing a weird bug, specifically on my website and others like it using the wordpress theme WPfolio Two. When you hover over a link, the link jumps and drops to the next line. As soon as you move your mouse away from the linked text the text link hops back up to the line it's supposed to be on. This only happens using Chrome or Safari, it does not seem to happen in Firefox. For an example hover over any link on on either of these two pages http://jasonirla.com/category/news/ or http://notlaura.com/wpfolio-two/read-me/ Thie bug does not seem to effect drop down navigation menus or some (but not all) links in sidebar widget menus.
The bug makes it practically impossible to click the jumping link. I'm not experienced enough to say if this is a browser bug, a OS X bug, a problem with the code in the wordpress them I'm using or what. I am comfortable editing and writing small additions to the theme code using a child theme CSS but in this instance I have no idea where to start or what I'm looking for (to fix). All I know is that this problem did not occur when I was still running 10.8 mountain lion on my mac.
If anyone has any experience with problem like the one I'm experiencing and could offer me some advice I'd really appreciate any help you can offer. I've been searching all over for a week now and haven't been able to find any answers and nothing I've tried seems to make a difference. Thank you for any help or advice you are able to offer.
Can't leave a comment, so I hope this will help you:
Check your font-style on this hover link, is it bold on hover?
Do you use another font-size on hover?
Do you use a iOS compatible font on hover? (using a font that only works on windows systems will be transformed on iOS devices and could cause this bug.
I was contacted by the designer of the WP theme (WPfolio Two), there's a style on 193 of the CSS "display:compact" which is the problem. I put block comments around that line /* display:compact */ and the bug is fixed. Thanks for the initial help #lickmycode – user1544398 just now edit
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
When checking my website a couple of days ago, everything was OK, but having looked at it this morning in Chrome, the background image and colour applied to the body have just disappeared completely. Safari is also looking pretty bad with the background colour visible and the background image on the body only visible behind other background images!
Things I've tried...
resizing the background image so that it's a lot smaller
removing the image and just having a background colour
viewing the site in incognito mode
Absolutely no difference in the outcome. I've cleared the cache and tried disabling caching but to no avail. Also, the file definitely exists. Not only can I see them being downloaded in the 'Network' tab in the Chrome developer tools, you can see it here: http://charanj.it/assets/images/website-bg.jpg
You can also see the smaller version I tried http://charanj.it/assets/images/website-bg-small.jpg
Weirdly, resizing the browser window in Safari brings the background image in. Another odd thing is that another site I built using almost exactly the same background techniques shows the images just fine, see http://nikeplusphp.org
The CSS has been generated using LESSPHP but I'm sure this isn't the issue as it was working fine before and no changes have been made to the CSS in months.
I have Chrome v19.0.1084.46 m and Safari 5.1.2, Windows 7 but the issue also occurred on my MacBook with the Chrome 19.
Tiny bit more information: Issue happens in a locally run copy of the website too.
Although it seems to be a browser issue, the culprit was the following line of CSS at the top of the stylesheet:
* {
-webkit-backface-visibility: hidden;
}
I tried moving it elsewhere but I still get the same issue. Applying to individual elements seems to work, but as I no longer use any 3D transitions on the site, there's no need for it and removing it has solved the problem.
In my chrome(20.0.1132.11 dev-m) everything is ok.
The problem may be in the extensions (try to disable all) or the most chrome (try to reinstall it)
Update: Same bug on SO and in accordance with the answers to that question, this bug is known and not yet fixed
I checked your website, and the background works, try to clear all navigation data (ctrl+shift+delete select all check-boxes and any time of).
This problem is only happening in Google Chrome on Mac OS X (Chrome 17). I've tested it on all the major browsers on Mac and Windows 7.
Here is the page in question:
http://dealsfortherich.com/drop/
As you can see, I'm loading divs via JQuery AJAX.
The page is always fine on "Refresh."
You can navigate pages with the left and right arrows. The problem happens when you change pages; especially when you change pages when scrolling the page quickly. Try scrolling the page down very fast and hit the right arrow.
The background images that were already loaded via CSS (for example):
.sort_block{ background: url(images/sort_block.png) no-repeat;}
start to disappear. Only background images that are loaded with CSS start disappearing. All are fine. If you open Developer Tools on Chrome inspect the elements, you will see that the browser has the correct syntax and it has already downloaded the image into its cache. For some reason, it's just failing to display it. The CSS display value is correct. In the Inspector, for the div with the missing background, if you modify a value such as "top: 8px;" to "top: 9px;" the image suddenly appears.
This is only happening in Chrome (v. 17) and Chrome Canary (v. 19) for Mac OS X (10.7.3).
Should I report this bug to Google or is there a known work around or fix? I guess I can replace the s with s but I would rather do it correctly and fix this weird issue.
I don't know if this is the same issue, but the root is probably the same: http://code.google.com/p/chromium/issues/detail?id=111218. Based on that report, I don't think there's a known fix yet.
I had the same problem and diagnosed it for hours, but it's not about your code, it's a memory related bug in latest chrome. In my experience it doesn't happen to small images, so a temporary solution would be to decrease the file size (to under 10kB or so).
I have a test file here, showing the difference between a big and a small background image.
http://kolina.fi/chrometest.html
We worked up a solution for this issue until Chromium/Chrome "fixes the glitch" (hi, Milton)...
My colleague, Andrew, posted our solution here:
http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/
You can see the page in question at:
http://www.mavenlink.com/tour
It sounds like this has worked for others as well, but it's ugly!
I've recently had this issue, and the fix was to use the complete url, rather than a relative path.
E.g. change url(images/image.png)
to
url("http://yoursite.com/images/image.png")
Use :url(.//images path. The .// should solve the problem.
Heres the story:
When I load the following page in chrome (verified across 2 computers), it seems like about 1 in 5 refreshes results in display errors.
Often, the background image only loads halfway down the the screen, and the bottom half displays only white (which is weird b/c I have the background set to black under the image.)
There is at least one other incorrect way that it displays which is a less exaggerated version of the other problem.
Since it only happens sometimes and only on chrome (as far as I can tell) and only on one page of the site, I have ignored this issue for more pressing concerns; but I develop in chrome so I am constantly reminded of it.
I have absolutely no clue why this kind of thing would happen and even less of a clue how to remedy it. Any insight anyone might have would be greatly appreciated.
The page
Try to load your page in Safari. If you see same problem, means you missed a bracket or semi column in your css. Webkit browsers seem to handle css errors this way. I had same problem happening to me once. My css file was over 2800 lines. It took some time to find the error. Best.
See the following link:
Issue with background color and Google Chrome
This fixed the problem for me...