CODEWITHSUNDEEP
iphonecssmobilesafariwebkit
Joe
Joe

Reputation: 26787

Issue with webkit tap highlight color not being applied

I'm having trouble to get the -webkit-tap-highlight-color property to apply to a div - I'm at a loss as to why it isn't. Copying all the styles that apply to it below. The desired outcome is a back button as shown here: http://building-iphone-apps.labs.oreilly.com/ch03.html#ch03_id35932102

.backButton {
  font-weight: bold;
  text-align: center;
  line-height: 28px;
  color: white;
  text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
  position: absolute;
  top: 13px;
  left: 6px;
  font-size: 14px;
  max-width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-width: 0 8px 0 14px;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  -webkit-border-image: url(/static/images/backButton.png) 0 8 0 14;
}
.backButton.clicked {
  -webkit-border-image: url(/static/images/back_button_clicked.png) 0 8 0 14;
}

.toolbar{ 
  background-color: #e1f7ff; 
  -webkit-box-sizing:border-box; 
  border-bottom:1px solid #559D75; 
  padding:10px; 
  height:53px; 
  background-image:-webkit-gradient(linear,left top,left bottom,from(#e1f7ff),to(#a1d2ed)); 
  position:relative; 
  z-index: 70; }

Applied here:

<div class='toolbar'>
    <div class='backButton'>Back</div>
</div>

Viewing it in iPhone simulator (OS 4 enabled) and Safari - same problem with both (tap highlight still shows up).

Thanks in advance.

Upvotes: 1

Views: 4013

Answers (2)

Joe
Joe

Reputation: 26787

This is embarrassing. The image I had been using from an example back button online had the background color in it - it wasn't a problem with the CSS property.

Back Button

I'm almost embarrassed enough not to post this answer, but I'm willing to swallow my pride in hopes of helping others. Let this be a lesson: if you use example images from Google images, etc., be sure the copy you download looks as you expect it to.

I wish I could reclaim the hours I spent trying to debug this, but maybe this will help someone else gain them back.

Lesson learned... thoroughly.

Upvotes: 4

Blago
Blago

Reputation: 4737

Try adding:

-webkit-user-select: none;

Upvotes: 4

Related Questions