diff --git a/src/assets/stylesheets/2d-hud.scss b/src/assets/stylesheets/2d-hud.scss
index 67fbc0ada8db77ad2e2fee42b62ebb1f1c00f624..ca0a87c337153e683a0a08964e02c071f0941f62 100644
--- a/src/assets/stylesheets/2d-hud.scss
+++ b/src/assets/stylesheets/2d-hud.scss
@@ -1,12 +1,18 @@
 @import 'shared';
 
+:local(.unselectable) {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 :local(.container) {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
-  user-select: none;
 
   &:local(.top) {
     top: 10px;
diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js
index ee5d75df591373e1d2b1bb6fdb2112cf3993affd..c2db55e5f8b953b8597f79915f645d96f4270b83 100644
--- a/src/react-components/2d-hud.js
+++ b/src/react-components/2d-hud.js
@@ -5,7 +5,7 @@ import cx from "classnames";
 import styles from "../assets/stylesheets/2d-hud.scss";
 
 const TopHUD = ({ muted, frozen, spacebubble, onToggleMute, onToggleFreeze, onToggleSpaceBubble }) => (
-  <div className={cx(styles.container, styles.top)}>
+  <div className={cx(styles.container, styles.top, styles.unselectable)}>
     <div className={cx("ui-interactive", styles.panel, styles.left)}>
       <div
         className={cx(styles.iconButton, styles.mute, { [styles.active]: muted })}
@@ -38,7 +38,7 @@ TopHUD.propTypes = {
 };
 
 const BottomHUD = ({ onCreateObject, showPhotoPicker, onMediaPicked }) => (
-  <div className={cx(styles.container, styles.column, styles.bottom)}>
+  <div className={cx(styles.container, styles.column, styles.bottom, styles.unselectable)}>
     {showPhotoPicker ? (
       <div className={cx("ui-interactive", styles.panel, styles.up)}>
         <input