ran into some issue i have never seen before.
It only happens on chrome, the options of a select element show up garbled when the select box is expanded but show all right when something is selected. You can see the issue in the attached screenshot where the left select shows a selected option right and the second shows the expanded view. Looked online but there is not much to find, as the problem cannot be described easily. Encoding is utf8, firefox shows everything fine...
Any ideas?!
attached image:
Will try at another computer too, think it does so though from previous testing.
From the looks of it, some issues have been reported with Chromium while using local fonts including Museo and haven't been fixed yet, so you might be dealing with a browser bug as well.
Related
I have a wordpress site and one of the pages has got the form with select box. The select dropbox works fine on PC browsers and even on mac safari. The only issue is on mac chrome. When I hover on the select box to select the option and do nothing the option lists is glitchy and flickering. I haven't used any kind of css or jquery plugin for select box, just the normal css has been used.
I googled but didn't find anyone having such issue or may be I couldn't type the proper keyword while searching. Can anyone provide an idea how can this be fixed.
Thank you the help.
on a site I built I have a strange issue.
Until recently a specific menu was working like I expected.
But today I saw there goes something wrong on Firefox for Mac now.
I checked the site Safari and Chrome for Mac, an no problem there.
The weird thing that happens is that the links in the menu drop out of sight, except the one page that has childpages (which are not shown in this menubar).
So I think: I will use the 'inspect element' to see if I can find the problem. But the second I inspect an element the menubar looks like it should. I close the inspector and it is back to trouble again.
Any tips or insights would be helpful!
The site is http://www.wij30.nl
Okay, I fixed it, well actually I found a work-around.
The point was not that the only link that was shown was one that had child-pages. It was the one link that consisted of more than one word. And for some obscure reason it broke into 2 lines in Firefox38 for Mac. ("over WIJ" in the first line and "3.0" in the second line). Moving all the items that contained only one word down the line.
Adding some none-breaking spaces in the menu label fixed the problem for now.
But like I said: really a work-around not really a problem-solver.
If someone can tell me why Firefox38 for Mac made this happen: please tell. Thanks!
I have run into this a couple of times - I coded or modified a CSS template with a specific thing in mind, yet the browser displays it differently than intended. When i use "Inspect Element" in Chrome, it shows the attributes I intended associated with that element, yet the browser is showing something different. What are the possible options from here as far as figuring out the issue/getting the site to look how you want?
Before I had an issue that I can't remember exactly where it didn't display correctly in Chrome (but Chrome Developer Tools showed it as I intended), but it did display in another browser.
Now, I am having an issue where multiple pages on the same site have different fonts for the same menu although the CSS showing in Inspect Element is correct for all - the behavior is consistent between Chrome and Safari (haven't checked other browsers yet).
You could always check for !important on lower down lines. I think that happened to me once, and I don't think it put a line through my style that was being overidden. (It may have though it was a long time ago it happened.) The only way really around that if that's the case and if that !important is necessary is to add !important to your rule you want to overwrite with. (Try to avoid using importants wherever possible though, because in most cases an important isn't necessary.)
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.
See http://www.arthwine.co.uk.
This used to work fine in Chrome and works fine in all other browsers (afaik). Now, for some reason, Chrome is hiding most of the left column (apart from the bear). If you look on a different browser, there is a panel with the branding and a menu in it under the bear.
I can't figure out at all why it's doing this. Any ideas?
The reason it breaks is because of the bear. Or rather, it is because of the way you relatively positions the image of the bear outside the bounds of every single one of it's parent elements except the body.
This makes chromes rendering engine choke on your layout somehow.
You can test this very easily by just deleting the image of the bear from the source code, and see how everything else suddenly pops into place.
I checked it in Chrome 9.0.597.98 and I had the same problem. The solution that I found, is to add position:absolute; for the #header.
I don't see anything wrong in Chrome. I see the menu and the branding.