0

I'm making a website for ipad, a black square always appear when I click any links or javascript buttons on my website a black square box flash and flicker around the button for 0.7-1 seconds , anybody has the same problem, very annoying if my button is big, the black square is obvious.

user1743251
  • 85
  • 7

3 Answers3

2
    -webkit-tap-highlight-color:rgba(255,0,0,0);

This will disable the black square correctly

user1743251
  • 85
  • 7
0

You should be able to control this using -webkit-tap-highlight-color. If you'd prefer to disable visible feedback on links altogether, use -webkit-touch-callout: none.

Chris Herbert
  • 6,145
  • 3
  • 19
  • 31
  • I used the high light color can change the black square box color to red, but the touch callout didnt work, the square still there even I applied it to all div span section ul li body html a...Also , do you know why everytime I pinch zoom my webpage, my webpage freeze for a second then the background flash and flicker for a second and looks like refreshing,loading my background square to square ,after a second it comes to normal? – user1743251 Nov 20 '12 at 05:16
  • Try using -webkit-tap-hightlight-color: rgba(0,0,0,0) – Chris Herbert Nov 20 '12 at 05:23
  • You will need to show us code to give you help with your other question. – Chris Herbert Nov 20 '12 at 05:24
  • my code is quite too long to show here, I don't know what can make it, but I suspect it is related to overflow, coz I wrap my whole page using a div with overflow-y:scroll,width and height 100%.I already searched in google, I tried using -webkit-overflow-scrolling:touch, can't help. -webkit-transform:translate3d(0px,0px,0px); is useless too, then I try -webkit-backface-visibility: hidden; and -webkit-transform : translateZ(0); all useless... :( it dont have any problem in my macbook! I dont think it related to my javascript, coz I remove all of them the problem is still there – user1743251 Nov 20 '12 at 05:36
  • Did you try -webkit-tap-hightlight-color: rgba(0,0,0,0)? – Chris Herbert Nov 20 '12 at 05:47
  • yes rgba works . but I'm working on my flickering pinch problem now – user1743251 Nov 20 '12 at 05:55
  • Without code or a link, I don't think anyone will be able to help you. – Chris Herbert Nov 20 '12 at 05:57
0

I found out what causing the problem in my code, although I don't know why is that, I have to remove 'overflow-y:scroll' and overflow-x:hidden in my code to prevent pinch zoom flickering problem. I use overflow-x hidden because element break through my container div if user resize the webpage very small, and use touchpad to scroll horizontally, will see element break through and blank areas, now I can't use overflow-x hidden coz of this weird stupid pinch zoom flickering

     #viewport{
      display:block;
      position:absolute;
      width:100%;
      height:100%;
      overflow-y:scroll;
     -webkit-overflow-scrolling: touch;
    }
   #wrapper{
    width:100%;
    overflow-x:hidden;
   }
user1743251
  • 85
  • 7