Some change in recent Chrome versions (likely in June 2017) cause options in a <select> input to render much bigger than in other browsers (or in older versions of Chrome).
For example, dropdown on this w3schools page on some machines renders like this (Chrome 60.0.3112.90, 64 bit, Windows 10):
instead of expected (Firefox 55.0, 64-bit, Windows 10):
Is there any workaround that can be implemented in code to prevent it from happening (CSS solution preferred)?
So far I've found:
Discussion on Chrome product forums, which confirms that this is observed by many people, but there's no answer whether it was intentional or not. Also, observations were made that presence of touchscreen drivers in a system might cause this behaviour.
Chromium bug #739196 describing this issue, but also with no clear answer whether it's intentional or a Chromium bug
few answers suggesting that padding for <option>'s in a <select> can't be controlled via CSS by design, so this padding was never easy or possible to change.
Should be able to just add some CSS styling for the <option> tag to get it to look the way you want on most browsers.
http://jsfiddle.net/Ahreu/50/
The additional padding was added in Chrome 59 for any device that Chrome thinks has a touch interface. There currently is no way to disable this "feature".
Chrome shows two rows in Dropdown-menu
Google Chrome Help Forum
Observed same issue on Windows 10 + Chrome, with no actual touchscreen interface.
Uninstalling/installing "Synaptics Pointing Device" (touch pad on laptop) fixed the issue for me. As the other forums mentioned, it appears to be related to Chrome thinking it is on a touch enabled device. Worth a try to disable/re-install devices that may appear as such.
Related
Recently part of the app I work on was tested on Windows, and we found that dropdowns/select elements in one particular UI context rendered very differently on Chrome for Windows and Ubuntu than it did on Chrome for macOS.
I have tried inspecting the elements and the styles in Chrome dev tools on the different operating systems, but have been unable to see any difference that could account for the dropdown being as expected in one context, and completely unusable in another.
My question is what could account for this difference, and is there any way in dev tools to see what the difference is? I am new to debugging cross-platform styling issues, and am not sure where to start other than the styles tab in Chrome dev tools, and I haven't found what I am looking for there.
On macOS:
On Windows and Ubuntu:
(in the screenshot it appears as though the months are absent, but they are just white-on-white, so they can't be seen unless they are highlighted):
Selects are mostly styled by the browser / OS. So you can customize it up to a certain point (you can use -webkit-appearance: none; to disable some of the default styling, then apply what you need), but to really make it look identical throughout all platforms, you have to fake it with some regular elements like divs and lis and JS
I'm working on a website that has a handful of radio buttons. In most browsers everything looks fine, but in IE11 some of the radio buttons look like googly eyes. Now, is this a bug in IE11 or am I doing something wrong?
Edit: screen shot of the real website:
Here's an example (try it in IE11 to see the effect): http://jsfiddle.net/TjZA5/
Here's a zoomed screen shot from my browser (IE11 on Windows 7):
You can clearly see the different spacing between the centre discs and the outer circles. The HTML is identical and valid (lots of <input type="radio" checked="checked"> elements) and so is the CSS (just a little margin to make the effect more obvious). I'm wondering if it's a rounding error in the IE rendering code?
Update: I submitted this issue as a feedback item to Microsoft Connect (http://connect.microsoft.com/IE/feedback/details/814911/radio-buttons-look-like-googly-eyes-in-ie11) and got a response saying that it's an optical illusion. I don't think it is, so I provided some more examples. I'm more convinced now that it's a bug in IE, but I'll have to wait and see.
Update re Edge browser in Windows 10:
I noticed that this issue persists in Microsoft's latest browser, Edge (which comes with Windows 10):
The Microsoft Connect issues hasn't been updated, so I guess we're stuck with googly eyed radio buttons for now.
Update: Microsoft Connect Issue closed as "Won't Fix"
I've created a new issue on developer.microsoft.com: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7114234/ in the hope that they'll fix it one day.
Update: Microsoft have updated the issue saying it's fixed!
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8516392/
I haven't had a chance to test this on a new build of Windows 10 yet, but will do asap.
The response you got on Microsoft Connect was not from Microsoft. This is a known issue that we are tracking. I think it is related to our sub-pixel positioning logic but it is definitely something we're tracking. You should see this updating in Connect soon.
#TheGermanOne - I agree this is a bug. I get the same as show below for IE 11 and Chrome. IE zoomed doesn't look too bad but 100% is crappy :(
Taken from your jsfiddle.
Chrome:
IE:
For some reason, my tabs have gotten crunched on my google chrome browser (see picture attached). I've try to go into settings and reset browser but it does not change. I'm running windows 8.1 with my fonts at 150% because I have big monitors.
Version 31.0.1650.63 m
I just did some more searching and found the answer (though it makes the screen pretty ugly, google does not do a good job with this)
http://productforums.google.com/forum/#!topic/chrome/BnI6QInBHC4
"I found the answer posted by Azmeer Kahn on November 22. Type chrome://flags in the address and scroll WAY down to the HiDPI section - change from default to Enable. Whew. Worked for me."
Are these tabs pinned? I had similar problems with pinned tabs in early versions of chrome. Unpinning and pinning again might help then.
I got a really strange problem, and after so much tries and research I can't get out of it.
I have a website, but SOME (just 5% of visitors) people with the SAME version of chrome, see the text flowing out of divs and text overlapping. It's very strange because I tested the website on all chrome browsers using browser testers, without any problem. And in internet explorer or firefox this problem never happens...
A page is located here
And here are some screenshots of what SOME people see (maybe you won't see this in chrome)
click here
Maybe it is because of the font face I am using? Or maybe some bad coded CSS?
Please help me out of this!
Thanks a lot!
I see you use .svg font. Recently I was hunting some Chrome font rendering bugs and saw this:
http://code.google.com/p/chromium/issues/detail?id=95102
This seem very similar to issues you are having. You could try to serve some other font type to Chrome and if this would fix that.
If you don't want or can't serve some other font type to Chrome, the only thing you can do is wait until Chrome version 24 is out to all users which should be soon (I can't find any announcement)
I tested it in
Chrome 23.0.1271.97 m
Chrome 26.0.1371.0 canary
Chromium 25.0.1334.0 (169326)
# Windows 7 x64 and your page seems fine for me.
Please check out this snippet of my site.
http://jsfiddle.net/TmnPV/
The logo is made up of the 'circle1' and other div tags in the same html sections. It doesn't show up on jsfiddle either and it looks different on every browser.
On chrome = shows all
On firefox = no logo shows and bottom text under input field is larger
On safari = no logo shows
What can I do?
This is called, umm... , welcome to wild wild world of web. Every browser vendor parses html/css/javascript differently. Some are lenient, some are strict. (Chrome Vs. Opera). Some have different Box model, some have standard operational behavior, some tend to do their own thing.(Opera Vs. IE6)
Answer to different renderings : You have to hunt down each and every little quirk. One by one.
Welcome.
You'll need to adjust your styles for older browsers if you plan on doing alot of css3 transforms.
IE 6, 7, and 8 just don't have the ability to read those styles.
Even on Firefox, depending on the version, you'll run into various spacing issues since the rendering engine is different than Chrome (and Safari).
For using html5 and css3 in older IEs you can (sparingly) use polyfills, which duplicate the effect using javascript. You can see a list of available polyfills here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Quirksmode is a great resource for checking compatibility: http://www.quirksmode.org/compatibility.html
I would highly recommend the Firebug add-on for Firefox to see where the extra spacing, etc is happening.
When you run into a specific issue with a specific browser that you can't figure out post a question here. It's much easier to help with one bug than just general browser problems.
That's mostly because you are using code to work with one browser. Different browser uses different code renderer. It's hard to make everything look the same, even tho Internet explorer is the worst, other browsers have different features. Opera has most of the HTML5 form features, that no other browser supports so far, but Chrome and Firefox supports the most of the HTML5 attributes. Hope this helps understand the reason why.