I have a picture that I want to render both unselectable and undraggable. (This is not an attempt to prevent users from copying)
To accomplish this, I can:
- Add a
.noselectclass to the<img>tag. As recommended here. - Disable
pointer-events. (I am aware that this also deactivatesonclick, but since clicking on this image is unnecessary, it doesn't concern me.)
body,
html {
background-color: #181A1B;
color: white;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Oxygen', sans-serif;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.introduction {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.introduction p,
h1 {
margin: 0px 0px 0px 10px;
}
.introduction img {
border-radius: 100%;
pointer-events: none;
}
.clearfix {
clear: both;
}
.noselect {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer / Edge */
user-select: none;
/* Non-prefixed version */
}
@font-face {
font-family: 'Oxygen';
src: url('../fonts/oxygen/Oxygen-Regular.ttf');
}<!DOCTYPE html>
<html>
<head>
<title>Amir A. Shabani</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles/style.css" type="text/css">
</head>
<body>
<div class="container">
<div class="introduction">
<img class="noselect" src="https://raw.githubusercontent.com/amirashabani/shabani.xyz/master/images/profile.png" alt="profile picture">
<div class="introduction-text">
<h1 class="noselect">Hi, my name is Amir.</h1>
<p class="noselect">I'm a backend developer and an avid Linux and FOSS enthusiast.<br/>I enjoy programming and developing software that works efficiently.<br/>Currently, I'm studying Software Engineering at the University of Qom, Iran.</p>
</div>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>While this functions correctly in firefox 69.0-1, there are issues in google-chrome 77.0.3865.75-1:
https://i.sstatic.net/z0U63.gif
I cannot drag the actual image, yet if I try to highlight the image containing div, then I can initiate the dragging process. The same scenario occurs in opera 63.0.3368.88-1:
https://i.sstatic.net/jBfLd.gif
On the other hand, to demonstrate its functionality in Firefox:
https://i.sstatic.net/qgkHz.gif
How can this be rectified?
I've also utilized draggable="false" in my <img> tag, but the issue persists.