We Keep Coding

Error Disabling User Interaction with DIV Element on Mobile Browsers

I have a WooCommerce widget on my website that has several options for user interaction, one of which is by the user clicking on a product picture that is displayed.
I don't want the user to be able to select the picture, so I added custom CSS to disable the pointer events for the ahref DIV of the image. This worked for the desktop version but the picture is still clickable on mobile browsers. I've tested on Safari and Chrome iOS browsers.
After some research, I discovered that touch-action is supposed to disable mobile touch events. I tried adding the following items with my pointer-events CSS to disable mobile interaction, but the image link is still selectable.
-touch-action: none;
-user-select: none;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Old version of Firefox */
-ms-user-select: none; /* Internet Explorer or Edge */
user-select: none; /* All modern browsers */
I have tried CSS actions both with and without the - prefix.
I have referenced the following questions without any luck:
Disable DIV selection when clicking on it
how to disable DIV element and everything inside
How to disable touch action for on single HTML Element in iOS
Are there any other CSS actions that I am missing?
It seems that this might be able to be accomplished with a script in the functions.php folder of the site, but the few attempts I've made there haven't been successful.
Script Reference: https://wordpress.stackexchange.com/questions/33724/remove-links-from-images-using-functions-php
Open to other solution methods as well. Thanks!

CSS media query display-mode: fullscreen does not work on safari

CSS media query display-mode:fullscreen does not work on safari (the css inside the media query never gets applied). Current safari version: Version 14.1.
#media all and (display-mode: fullscreen) {
...
}
Full example here: https://jsfiddle.net/gnbcv6em/3/
It works on chrome but not safari. I've tried triggering fullscreen with the browser's fullscreen keyboard shortcut or by triggering it manually with js, but neither works on safari.
Also, https://developer.mozilla.org/en-US/docs/Web/CSS/#media/display-mode shows that safari supports it.
Perhaps someone has come across this issue and can help?

Faced with the same issue. Solved by this:
body:-webkit-full-screen .selector {
display: none;
}
And SCSS version (if you have nested selectors):
#at-root body:-webkit-full-screen & {
display: none;
}
At this moment Safari doesn't support :fullscreen selector, so need to use :-webkit-full-screen.

How to Disable onclick text highlight in mobile browser (Chrome)?

I'm using Boostrap 4 to build a Web. A simple code such as below:
<div class="col-12 p-2" id="Maincourse">
<h1 class="m-0">Main course</h1>
</div>
I use my Android Chrome Browser(version 80.0.3987.149) click on the text, it will highlighted the text and popup google search.
How can i disable it? I Don't want to set user-select: none because I need to let the user highlight the text when long press.

.disable-select {
user-select: none; /* standard */
-moz-user-select: none; /* firefox specific */
-webkit-user-select: none; /* Chrome, Opera and Safari*/
-ms-user-select: none; /* IE, ms-edge */
}
Source1: https://www.w3schools.com/cssref/css3_pr_user-select.asp
Source2: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
version compatibility
desktop:
Chrome: 54+
Firefox: 69+
Opera: 41+ (15+ with vendor prefix)
Safari: 3+
MS Edge: 12+
IE: 10+
mobile
Chrome for Android: 54+
Android web-view: 54+
Firefox for Android: 4+
Opera for Android: 14+
Safari on IOS: 3+
refer to the sources for more info and version compatibility.

try this:
-webkit-tap-highlight-color: transparent;

I've been doing the user-select: none fix for this for awhile and found it unsatisfactory, so I started searching around for a proper name for the feature in order to see if there was better fix/write-up for it and I came across this Google Developers post from Paul Kinlan (apparently the feature is called "Touch to Search"):
https://developers.google.com/web/updates/2015/10/tap-to-search
which describes the behavior in detail and the various ways in which you can disable or enable the behavior.
Relevant excerpts pertaining to your question:
Tap triggering is enabled for any plain text that is selectable and non interactive or not focusable. When the page has a click handler that responds to a tap on text, Touch to Search automatically detects the response and ignores it since we know the developer intended to handle the event. Using a touch-and-hold gesture to manually select text also triggers the Touch to Search bar. Users can enable or disable the feature using a preference under Chrome's Privacy settings.
As the author of a site there are often times when you don't want a tap gesture on certain element to trigger a search. To ensure that Chrome does what you intend, make those elements:
Focusable: add a tabindex=-1 property on the element.
Interactive: Use any of several standard ways to indicate that an element is interactive:
Use accessibility markup to indicate the element has a widget role, or widget attributes. For example, any element with role=button won't trigger. Adding accessibility markup has the added benefit that your page will be more readable by visually impaired users.
Any JavaScript click handler that calls preventDefault(), or manipulates the DOM or CSS will not trigger Touch-to-Search.
Non-selectable: using -webkit-user-select: none; Non-selectable text will not trigger Touch-to-Search even when using the touch-and-hold gesture.

By adding role="dialog" into the wrapper solved my problem.
But I have no idea why, anyone can explain?

Unable to select the text in IE browsers in Ionic frame work

When I'm trying to select text with the mouse on my website with internet explorer (IE10 and IE11), I just can't figure out why
By default Ionic is disabled text selection. I am overriding ionic classes with following code.
body{
-moz-user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
-o-user-select: text;
user-select: text;
}
It is working for chrome, firefox and opera, but not working for IE.
Does have anybody an idea how to fix this? I've already search for similar problem but no answer.
Thanks all for answers

jQuery-focused textbox loses focus after one character of input in Safari

I have a textbox that's being automatically focused with jQuery when an element is clicked:
my_item.find('input').focus();
It works in Firefox and Chrome as expected: the input area is focused and I can begin typing in it. In Safari the behavior is different though. I click the element, the input is focused, I start to type in the box, and it only lets me type one character. After the first character of input is typed, the input box loses focus and further typing doesn't work unless it's manually clicked for focus again.
I've found questions about focus() and Safari working strangely but I think this is a different issue. I've tried the solutions suggested there, such as e.preventdefault() on mouseup and similar, with no effect.
How can I get my focused text input area to remain focused while I'm typing in Safari?

The question is a bit old, but i recently had the same problem so this is what i´ve found.
Check if your css rules blocks the touch callout.
If you have any rule like this try to remove and then try typing again
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;