html element making whole web app selectable?

Question

I have most of my web-app set as unselectable. Using div as an example:

div {
    -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

The amazing thing is that I can still select most of the page by starting the select along the left edge-- the DOM inspector tells me I'm selecting outside of any DOM element itself, and am selecting from inside the top level HTML element. I tried being silly and setting it as:

html {
    -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

...which yielded no effect. I'm being a perfectionist here, but at this point I'm just curious-- how can you disable this entirely? The body is already 100% width. I don't understand why I can click outside it.

Also, this only happens in Firefox.

You can click outside the body presumably because the body has margins? — Boris Zbarsky, Feb 28 '13 at 17:13
@BorisZbarsky Then why does it only happen in FireFox? Also, no, the only relevant rule for the body is width: 100%. — temporary_user_name, Feb 28 '13 at 18:30
`` has a margin by default in browsers. If you didn't explicitly turn it off, it's there. As for why behavior is different, that's because there is no specification for selection behavior, so it varies in different browsers. — Boris Zbarsky, Feb 28 '13 at 21:00

score 0 · Answer 1 · answered Sep 15 '16 at 04:50

Throw a div as an overall wrapper use absolute positioning with negative top bottom left and right say -150 top -150 bottom then padd the content back in with 120 120 use a scroll top observer or add a sliding header and the additional 60 of space can function as default animation when there is a collapse (switching padding to margining

It should work but can be a pain in the neck if you aren't using the extended regions for headers layering or images.

Hope it helps.

Sincerely

Jason

html element making whole web app selectable?

1 Answers1