HTML Select Input Bug on iOS11 - html

HTML Select Input Dropdown is not getting dismissed properly on iOS 11. Upon closing the dropdown, an empty dropdown with blank options reappears in its place.
Nothing has changed, and we started getting complaints from iOS users, we could not replicate. Updated iOS to latest and now can replicate. The issue is, that they are always blank, from then on.
Pressure has been put on us to resolve this issue, has anyone came across this issue and have a workaround to resolve?
This is a cordova application, jQuery, bootstrap and knockoutjs. Any help be appreciated. I know it may be vague and no code but this is basic html selects.

Update to ios 11.2 and issue has been resolved. After reading plenty of news articles this was nothing compared to the list of bugs that went out on this version.

Related

Weebly editor - Issue with links to inpage # anchors - only with Chrome and IE

Hi all,
I have been working on this website here through the Weebly editor. I studied Web Development 10 years ago and have only been getting back into it for this job, hence the use of Weebly, hoping to make things easier for myself and for my employer to take over the site when everything is working well. I have been having a problem with links not performing correctly in Chrome and Edge, working fine in Firefox and Safari. I have been looking for the past 3 days now and tried a whole bunch of things without success.
I have built pages more like the main menus being one page and the submenus links to anchors within that page.
With the way Weebly works, I didn't see a way of adding an "id" attribute to any "Title" or "Text" element you use to struture your content. So I started with the fallowing sample code, interjected where needed:
<a name="anchor-name"></a>
I was just placing an "embed HTML" element a little above where I wanted the link to land to compensate for the menu always being at the top. This simple solution works fine with Firefox and Safari. But for some reason, with Microsoft Edge does not take me to the anchor, just stays at the top of page; using Chrome, it doesn't work properly when opening the link from an outside source, link from email or doing a right click and "open link in new tab", it jumps further than intented but works fine once you're on the site and go through the different sub-menus. Very puzzling...
In my research, I came across people with similar problems, never really the same. But I tried this more elegant way, creating a CSS class with the negative top to compensate for menu and changing display to "inline-block", some saying it corrected there problem with IE. No luck for me, Firefox still working fine though.
.nav-anchor{
display: inline-block;
position: relative;
top: -150px;
visibility: hidden;
}
I came also across someone saying to check for errors with the W3.org validator, see result here. The first error is :
Error: X-UA-Compatible HTTP header must have the value IE=edge, was
IE=edge,chrome=1.
I couldn't figure out how or where to change that, I looked through the Weebly editor > Theme editor in all the files and didn't see it anywhere. So not sure if I can add it someplace, or if the Weebly just includes that part for you. Any idea if that's is on the path of solving my problem?
I haven't taken the time to go through all the errors, can the errors make the links not perform correctly?
The answer here (thank you Jeffrey Kastner) did help some what with Chrome, Right-click > "Open in new tab" on a submenu link now sometimes takes me to the right spot, sometimes jumps too far down. I tried over and over with the same link, seemed random. I haven't got feedback from client using IE.
Thank you in advance for any help
(edit:greetings and thank you note disappeared on first post for some reason)
The short answer for your question is you'll want to add meta tags with those in your site's theme within the various types of header template files.
In the majority of themes I have seen used on sites at Weebly, the following "Header Type" files are in the theme editor, and you would need to add the following to each of those as children to the head tag:
header.html
no-header.html
splash.html
(of course, your list may be different depending upon the theme you're using on your site).
The meta-tag HTML code you need to include as a child to your head tag would be:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
The chrome=1 part is usually no longer required since the Chrome-frame was discontinued in 2014, but many people still include it as part. What is happening is you're instructing Internet Explorer to operate in "standards" (the latest rendering engine). The full answer to what this tag does with this setting is available in more comprehensible detail in this stackoverflow question.
I'm not sure if this will completely resolve the issue of your links not operating as expected, since there are many things which can intercept or interrupt the event bubbling process which occurs such as: javascript, frameworks, CSS issues, and many more things. If you were to provide some more concrete information and code examples with errors about what you're seeing, I might be able to help further.
Also, you may want to search in the Weebly Help Center and Knowledgebase, consider asking this question in the Weebly Developer Community or for a more personal engagement, by creating a Weebly Support Case.

Chrome console keeps getting stuck in a quirky state

The console gets stuck in a state where every two page refreshes a new closed instance of my indexedDB is displayed. They are all closed except for the one on the top and everything within the application still seems to function normally, however other strange things occur when using the console.
When I click on a table within the database it shows the data, but when I try to filter or go to the next page it all disappears. I have to completely close the browser tab and then reload.
Sometimes when I enter in console commands they don't do anything, don't return anything (not even undefined), but when I refresh the page it alternative between working and not working.
Let me know if you need some more information. I haven't a clue what's causing this. I'm using the latest version of Chrome 35. Any thoughts?
Saw this once. Try a fresh install, and if that does not work, try upgrading to dev channel 37. I did both those things (for other reasons), but have not been able to reproduce the bug since. Trudging through Chromium's list of open issues or changes might also help.
Also, it looks like your question is not really about programming so it might be closed. There are other 'something.overflow' sites to post this type question.
Edit: also, regarding the disappearing issue, I actually reported this bug on Chromium. It was recently fixed!

IE10 writing directly into an 'Empty Text Node'?

I've been doing a lot of testing in IE10 lately, and have recently ran into a very strange error.
Right after closing a jQuery UI dialog, IE10 opens up a cursor and allows the user type directly into the page. However, there are no inputs for them to be allowed to put things in, and from using Microsoft's F12 Developer tools, it seems that it is writing directly into the DOM -- an area that was a 'Text - Empty Text Node'. I have no idea where these nodes are coming from, or why the user can put text into one of them. I really have no code to show because it seems to be tied to nothing, and as I keep cutting away layers it still seems to be there.
Has anyone else ran into this? It seems to happen in IE9 as well. I'm at a loss here.
EDIT: In addition, I thought it may be helpful to say that I'm using jQuery datatables here.
Okay, so I have made some progress on this.
It turns out IE10 isn't writing data directly into the DOM -- instead, it dynamically created a text input, didn't recognize it, and then deletes it. You can type directly into it, but if you click off or focus on anything else, then it disappears and leaves completely.
I've still not diagnosed the source of the issue -- I know it only happens in IE, and may include datatables or jQuery UI. I tend to believe it's IE specific, because it's such a rare action and there's no trace of it anywhere else.
Hope this dialog helps someone else down the line. If you find a better answer, please post it!

What is sfdocready?

I see sfdocready in some footers of pages I have been working on. I cannot find anything about this?
For example:
<sfdocready id="sfDocReady"></sfdocready>
Thanks!
This has to do with Superfish (the <sfdocready> and <sfmsg> tags).
I just determined what was doing it in my case. Using Safari, I have (well, had, it's gone now for this bizarre behavior) the Awesome Screenshot extension installed. There is a checkbox in its settings called "Enable similar product search powered by Superfish" which looks for images on the page and uses them as search parameters to provide comparison shopping deals for you.
In its defense it did prompt me if I wanted to see price comparisons, but it did so on Amazon in a way that actually looked like the prompt came from Amazon.
To the answer above me about Firefox inserting it when you save the document, that's only because an extension or some JavaScript inserted it first, it has nothing specific to do with Firefox. It also has nothing to do with Wordpress.
Somewhat sleazy stuff, imo.
This looks like it's got something to do with Wordpress themes.
I have, an assumption, that this tag means: "safe document is ready", so something is running only after whole document has been loaded. But what exectly does it mean and how does it work, it`s a big question.
Near this tag I have also also often seen <sfmsg> tag.
This tag is inserted by Firefox when you save the page as an HTML document.
I issued this problem yesterday. I have firefox with a plugin named Awesome Screenshot. In order to solve this you need:
Click over the Awesome Screenshot
Select options
UNCHECK/DISABLE the option: "Enable similar product search powered by Superfish"
And that is all!

Random css class from nowhere

I have a problem on a page i'm coding. Problem is i'm getting random img classes from nowhere (at least nowhere i know). I've put the generated class below.
<img class=" iryjanjabqqmypymdnuv" src="some/source/path">
There are several jquery plugins and jqueryui on the page but div that got img has nothing to do with those js libs. I also use php but that must have nothing to do with this i guess.
If you need any codes or names of the libraries just ask. Please help me i really have no idea and all the search i did was empty about this.
I had exactly the same problem. Find out that AdBlock Plus is responsible for that. So, just disable all the extensions and reload the page
Just wanted to chime in for anyone that finds this googling their problem, this is exactly the right answer in my case as well. AdBlock Plus (in Firefox only, not Chrome) was generating random class names for images I have embedded in my nav bar for social media links.
Now I have to either find a way to get around that or anyone using ABP in Firefox will see a weird looking nav bar due to this issue. It's not exactly an unpopular plugin.
I work in both Chrome and Firefox and use ABP in both. Hopefully we won't have to find workarounds for this.
Is it possible that you're browsing on a mobile network connection? Some mobile networks modify the HTML/CSS for images so they can serve lower-bandwidth versions, but allow you to "fix" them later. For example, on T-Mobile, if I hover over an image it will give me an Alt tag telling me the keyboard shortcut to use to load the original.
Obviously this won't be the case if it's all local...
I had the same problem and disabled all extensions in Firefox and then it was gone. Not sure which extension is the guilty party, have too many to chase it down by disabling each of them one at a time. :)