radio button css missing on safari - html

I have a vue app that runs almost fine on chrome browser but some issues crop up on safari. The main issue is with the components which have radio buttons. When I click on any of the radio options it doesn't show the selected color(blue)(but the option is being selected in my responses JSON). However, if you click again on the same option it appears. Why does this happen on Safari, can anyone guide me? It works fine on Chrome.
the UI is here: https://sensein.github.io/covid19/#/activities/0
and the code is here: https://github.com/sanuann/schema-ui/blob/master/src/components/Inputs/WebRadio/Radio.vue
The entire build is carried out by Github actions and deployed via gh-pages.

I was able to fix it by removing the watch on "init" here: https://github.com/sanuann/schema-ui/blob/master/src/components/Inputs/WebRadio/Radio.vue#L105
I am not sure why it worked in other browsers and why the problem occured on Safari only. anyways was able to fix it.

Related

Problem with MDBootstrap (jQuery) dropdowns in Chrome, Firefox

I am creating a small project and for the front end I chose to use Material Design BootStrap (with jQuery), since I like those designs more than the standard BootStrap. Until now everything had worked correctly, but I noticed a strange behavior with one element: the drop-down lists. When you click on a list, it is displayed, but then there is no way to close it again, that is, to do the show / hide function when there is a selection, or when you click somewhere. It just stays open. The only way to close it is to refresh the page. This happens to me even on the MDBootstrap page. (https://mdbootstrap.com/docs/jquery/navigation/navbar/).
Well, some additional data: So far I had done my tests using the latest version of Chrome. I found it strange that such elementary functionality did not work even on the website of its creators. Then I tried Firefox, the same problem. Today in the morning while working, I decided to open the MDBootstrap page on my work computer, and to my surprise the drop-down lists worked correctly! I also did the test on a MacBook with Chrome, entering the same page and it also worked. I even tried from a virtual machine, and in the Chrome of this VM the drop-down lists worked!
In summary, MDBootstrap drop-down lists do not work, so far, in Chrome or Firefox on my personal computer at home. It occurred to me that it could be the extensions of those browsers that were causing some conflict with that element, but I uninstalled and reinstalled both browsers, and the problem persists. I have tried incognito mode with these browsers and it does not work. I tried Internet Explorer and Vivaldi, and in these if the drop-down lists work. Everything is so confusing!
Well, it's my first query on StackOverflow. If you can think of any other possible solution, or why this problem arises, the suggestions will be well received.

Firefox radio buttons not checking?

I have an angularJS application working fine in Chrome and IE (YES i said IE!!) but firefox doesnt seem to be showing the radio buttons as checked. I have checked the html (image below) and it seems fine, but as you can see the radio button is still showing as unchecked.
I have looked on the web and people say there is a bug in firefox with radio buttons but not sure if its the same bug here, and i have added the autocomplete="off" to both my form and radio buttons but still no luck.
Anyone else got a fix for this?
Given the timing of your question could be related to firefox bug that was in v33? https://github.com/angular/angular.js/issues/10089#issuecomment-63296014
If it doesn't happen in ff36 or above probably related.

HTML form only works in Chrome after browser refresh

I'm working on an existing Rails application using Turbolinks.
I have a plans page with upgrade/downgrade functionality. When this page is visited from another page and a button is clicked to upgrade nothing happens, although when I refresh my browser it seems to work fine and posts the form.
The strange thing is that other buttons work fine with Turbolinks installed and it only seems to happen in Chrome. Firefox, Opera and Safari it works fine.
Has anyone encountered this problem before? I've searched through Google all morning but can't seem to find a resolution.
It seems like it's a problem with Google Chrome. I've fixed it by putting the attribute data-no-turbolink in the HTML on the link that goes to the page in question.
Now, when I go to the page via clicking on the link it doesn't use Turbolinks and makes a full refresh of the page.
To just target Chrome (as it seems to work in other browsers) you could use this piece of js:
if ($.browser.webkit) {
$("your-css-selector").attr('data-no-turbolink', true);
}
Could be seen as a bit of a hack, but it works.

To solveBrowser conflict in firefox for our portal

we are developing a social networking portal ..but in the registration form we had browser conflict in radio button in firefox.
when the gender option is selected and changed its getting hide in firefox which is stable in chrome.i tried to solve by changing css but it dint help me.
still the problem exists.
can anyone have any idea of this problem???
I have a problem with Mootools Selector with the new Firefox.
Moreover, I have social network portal and recent firefox upgrade caused no editor in registration, post news and other user input areas to be missing.
It works perfectly in all other browsers and no changes to the site to cause a conflict. Other developers have same issue.
I'm not sure if this will assist http://www.simbunch.com/blog/127-problem-with-mootools-selector-with-the-new-firefox

Getting CSS Tooltips with iFrames to work in Chrome

I've been trying to get CSS tooltips with iFrames working cross-browser, but Chrome has issues.
Here's a test page I put together: http://paulleduc.com/test.html
As you can see, it works as expected in FF and IE, with the tooltip popping up to the right of the word every time. In Chrome however, the tooltip pops up at the left of the screen most of the time, and only popping in the correct position when you hover over the words from 'left-to-right' it seems.
Any ideas to get this working in Chrome would be appreciated,
Thanks!
I don't know about the tooltip version you are using specifically. BUT, I use this one
http://www.dynamicdrive.com/dynamicindex5/popinfo.htm
and I have no problem with it working on chrome or FF, it has worked on every browser I have tested it on, it also comes with really good instructions.
And I am not sure if it is supposed to be this way, but when I hover over your links it just opens a small square and I can see the google homepage.
But seriously, the one that i posted above DHTML Tool Tips, works really well cross browser, let me know how it works out if you decide to use it.
Please make sure you are using the latest version of Chrome. I'm using Chrome 17.0.942.0 (Official Build 110446) dev-m and cannot reproduce the issue - the tooltips pop up immediately to the right of the links. However, their contents are empty due to the "Refused to display document because display forbidden by X-Frame-Options." error (which I believe is unrelated.)