-webkit-grabbing works only for button in Safari

Question

I have a different behavior for the -webkit-grabbing css parameter for cursor on Safari. It works only on <button element, not <div>:

.a {
  background-color: green;
  width: 200px;
  height: 200px;
 }

.b {
  background-color: yellow;
  width: 200px;
  height: 200px;
 }

.grab {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.grab:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

<html>
<body>
<div class='a grab'>

</div>
<button class='b grab'>

</button>
</body>
</html>

For Chrome and Firefox it works as espected.

score 0 · Answer 1 · edited May 23 '17 at 12:24

Disabling user selection solved my problem:

...

.grab {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}

...

Taken from https://stackoverflow.com/a/4407335/118125

-webkit-grabbing works only for button in Safari

1 Answers1