Search code examples
htmlcssgoogle-chromefirefoxopera

Making <img> unselectable and undraggable at the same works in Firefox but not in Chrome or Opera


I have an image, and I want to make it both unselectable and undraggable. (Not in an attempt to prevent the user from copying)

I can achieve this by

  1. Adding a .noselect class to the <img> tag. As suggested here.
  2. Disabling pointer-events. (I'm aware that this also disables onclick, but since I don't need to click on this image, I simply don't care.)

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>

Now this works as expected in firefox 69.0-1, but in google-chrome 77.0.3865.75-1:

chrome

I can't drag the image itself, but if I try to highlight the div that contains the image, then I can drag the image. Same thing in opera 63.0.3368.88-1:

opera

And just to show that it works it Firefox:

firefox

How can I fix this?

I've also used draggable="false" in my <img> tag, but same thing occurs.


Solution

  • Just add an empty div over the image with your noselect class on it, it should work pretty cleanly

    Edit: or add the image as background image of a div with your noselect class.