I have a very inconsistent issue with iOS Safari on iOS 10.2/10.2.1 (at least). On many iPhone 7,6,4 it works without an issue but on at least 2 iPhone 7 I had this issue.
I have a position: fixed; bottom: 0; input element on my page. If the placeholder is e.g. Name, Safari will offer to autofill it with a contact name in the suggestion box above the keyboard.
The problem is that on some devices, this suggestion box of the keyboard will overlap the input element at the bottom of the page:
The suggestion bar was expanded when the keyboard opened and was not manipulated afterwards by collapsing/expanding it.
On many tested devices this does not happen, only on a few of them.
Only the suggestion bar seems to be the issue. The normal input switch bar does not exhibit the problem. When I change the placeholder to something else, Safari won't try to autofill it and everything seems fine:
(Except for the small white gap at the bottom but I could live with that)
Does someone know why this might be happening on some devices? And maybe even how I could go about fixing this?
(Side note regarding a possible workaround: As I said it seems like Safari parses the placeholder to decide when and what to offer as autofill. When I change it to something else it won't show up. Simply disabling it for that one field like that would be finde but the same thing happens on an "Email" field and there is no smart alternative word to use as a placeholder.)
For whatever it is worth, I just had this issue and resolved it by switching out the <input> element for a <textarea> element. Everything is working as expected -- I am not seeing the autofill suggestion anymore.
Related
When I mouse over many inputs and textareas all over the web, I see some weird text.
I thought it was on StackExchange only, but it happens on amazon:
(note that you can't see my mouse in these pictures, it is not recorded in the screenshot, but it is on the upper-left of each hover text.
Chrome's DevTools shows a weird title attribute:
I have no idea why this happens. The websites I've seen this on don't seem to have a library in common, so I doubt that would cause the problem. At the same time, I have seen this in browsers other than chrome, so I don't know. Even the textarea that I'm typing in right now has the problem.
Why does this happen and how can I prevent it from happening to my website?
Looks like that's a built-in Chrome option, an "experimental feature." Go to chrome://flags/ and disable "Show Autofill predictions" if you want to turn it off (mine was disabled by default).
I have a page, all styles are authored using em unit for sizing. I am facing a strange issue in IE9.
I have a requirement to have custom zoom buttons. By clicking on that button, I am increasing the font-size of body. Eg from 1em to 2em and all child elements gets the higher inheritance and zoom is applied.
But whenever zoom is applied, texts are hidden in SELECT and INPUT fields. This gets fixed as soon as you interact with that element - that is as soon as you focus the cursor on that element, everything looks okay.
See this picture:
What could be the issue? How I might fix it?
Please note, I tried making a JS fiddle, but no success on reproducing the issue. A clone of what I have in real app can be seen here: http://shekhardesigner.github.io/IE9-EM-Sizing-ZOOM-Issue/
Make sure you have correct Standard Doctype Rendering, also you could add
"<meta http-equiv="X-UA-Compatible" content="IE=Edge" />" inside the head tag. It helps to display the webpage in edge mode, which is the highest standards mode supported by Internet Explorer, from Internet Explorer 6 through IE11.
I have a search element widget on the home page of my site. Inside the widget there are different tabs which represent search criteria. The issue is for those inner search tabs look different in Chrome and Safari.
I am attaching the screenshots for both the Chrome and Safari versions.
Chrome version (preferred version)
Safari version (would like to see it like it looks in Chrome)
I tried playing around with it but all my hacks did was break it and make it worse. Can this be changed in Safari at all. There isnt much to the html, css code so I dont really know why it screws up in Safari.
Here is the public link for the site:
http://kw-kw-sb-test-site.cs16.force.com/KWRI_Master_site
Any help and suggestion will be appreciated.
Thanks.
Does each one of the search criteria shift downward when selected? The image that replaces the text of the criteria might be set to vertical-align: bottom or some other type of affect on the image.
We have a client who is using IE7 and for some reason drop-down boxes and text-area area fields are not displaying correctly. The arrow for the drop-down box does not appear and the right border of the text-area box does not display.
Works in IE 8/9, Chrome, FF. See image attached
Does anyone know what is causing this and how I can fix?
This is a html/php app
You didn't include the markup so we can only guess. There is no way to know for sure. I would inspect the textboxes in Firebug or something similar and see if they're inheriting styles that you aren't aware of.
I've checked other questions on here but I haven't found anything that will help me.
Since FireFox 4 was released I've been having an issue with the menu on my website.
www.ffxivinfo.com
As you can see, the menu is supposed to fit along the little graphic buttons so that each link is on the "button". In Chrome, IE8 (not checked 9) and FireFox 3.5 this looked perfect. However since FireFox 4 it has been displaying wrong.
It looks like it's a padding issue but I can't figure out where it is coming from. I have even removed the padding between each link so that they are close together (0 padding) yet the menu still stretches further to the right in FireFox 4+ than in other browsers.
I use the auto generated menus available at purecssmenu.com and I modified it to fit my own website.
Here is a link to just the nav code, I use a PHP include to insert it.
http://www.ffxivinfo.com/nav.php
And here is a link to the CSS for it.
http://www.ffxivinfo.com/navstyle.css
Basically I need the navigation to look the same in all browsers so that it fits into the graphic "buttons". I'm tempted to just scrap the current design and go with a simple gradient background and leave the menu wider in FireFox 4+ than other browsers but that's a bit defeatist.
Any help would be much appreciated. This is the first time a coding problem has sent me to a forum asking for help but I just can't figure this one out.
I believe the problem is not in your margins but due to the differences in text rendering between the browsers. In this case, Firefox is rendering the text slightly wider.
If I might suggest an alternative, rather than using an image background and hoping for pixel-perfect rendering (which is pretty unlikely given the diversity of browsers and operating systems out there) try styling the links themselves with background-color and border-radius.
I don't see the problem in FF6. However, I see you specify your font size in pt. pt is for print, not the web. Try changing that to px and see if that fixes your situation.
I might ignore the Firefox 4 issue.
FF is now on version 6.
Your issue does not appear in FF3.5 (the most widely used FF) or FF6, both of which have more browser share than FF4.
http://gs.statcounter.com/#browser_version-ww-monthly-201008-201108-bar