12

I am currently exploring web apps for iOS devices and use PhoneGap to create a "native" application out of it. The problem I have with this is the magnifying glass, that I don't want to be shown when selecting paragraphs (or bit of text). I have tried a lot of solutions but nether works. I use this CSS to disable all copy, selection and such for those fields I wan't:

*[untouchable] {
    -webkit-user-drag: none;
    -webkit-user-modify: none;
    -webkit-highlight: none;

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

This works fine, but it still shows the magnifer/loupe when I touch and hold on text:

Touch + hold shows magnifier on text

Is there a real solution to this? It would be awesome with a simple CSS property such like -webkit-magnifier: none or something like that. If there's a JavaScript solution, that would be fine too, but maybe a overkill.

Since I am using PhoneGap and it uses UIWebView to show the page, there might be a way of disabling the magnifier for that - but I haven't looked that much into the native source.

Thanks in advance :-)

2
  • this worked perfectly for me. I used the CSS selector *. Thank you. ACCEPT more ANSWERS! Nov 25, 2012 at 18:33
  • hi fnky,I am facing the same problem,did u find any solution for it?,Thanks Aug 27, 2014 at 21:45

2 Answers 2

4

The only way to accomplish this is to rid elements completely of selection since the magnifier is incorporated. -webkit-user-select:none; should be applied to all elements where you don't want the magnifier to appear.

4
  • You can see in the untouchable element there's already applied the -webkit-user-select:none; property - so why won't it work?
    – fnky
    Feb 13, 2012 at 19:21
  • 1
    You also have -webkit-user-callout set to none, so I am unsure what your problem might be. Be sure to set these properties to the correct elements and check over your CSS for any missed errors.
    – user799910
    Feb 17, 2012 at 19:11
  • 3
    I confirm that you both need "-webkit-user-callout: none;" and "-webkit-user-select: none;" to disable the magnifying glass
    – Max
    Mar 28, 2014 at 9:06
  • 1
    @Max, I have same problem in my phonegap application but it didn't work. Is there something I am missing out? Nov 26, 2014 at 6:27
3

This is what I used

* {
        -webkit-touch-callout: none;
        -webkit-user-callout: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-modify: none;
        -webkit-highlight: none;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.