CODEWITHSUNDEEP
htmlcsstransform
Olexander Ivanitskyi
Olexander Ivanitskyi

Reputation: 2240

Non-clickable area on transforming anchor

Here is my fiddle: http://jsfiddle.net/olexander/7hB8C/

I have an anchor, which is styled as a button (the styles are simplified to show the issue).

HTML:

<a href="javascript:void(0)" class="button demo">Button</a>

CSS:

.button {
    border: none;
    outline: none;    
    text-decoration: none;
    display: inline-block;
}

.button:active {
    transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
    -moz-transform: scale(0.8, 0.8);
    -o-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
}

.demo {
    padding: 40px;
    margin: 20px;
    font-size: 5em;
    color: black;
    background-color: lightgray;
}

The issue is that there is a non-clickable area inside the link-button. I can explain it that there is a text node inside the anchor, and when mousedown goes to the text node, after transform, mouseup comes outside the text node. That's why mouseclick is not processed.

If we select the text node inside the anchor, it can be visualized like this (before and after mousedown): click on the border of text node doesn't fire click event

I would like to notice, that the issue is reproduced at least in Chrome, Opera and Safari, and even if I put a link to href tag instead of handling click event. It is also reproduced with <button>, and not the issue for <input type="button">, because the first one uses content, and the second value.

Does anyone have ideas about better ways to avoid or workaround this behavior? Thanks in advance!

UPDATE:

I found a solution using a streched "stub" <span> to override the clickable area:

<a href="javascript:void(0)" class="button"><span class="stub"></span>Button</a>

and the stub styles:

.button > span.stub {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

This version is published here: http://jsfiddle.net/olexander/7hB8C/20/

The stub can be added dynamically by javascript, but the idea remains the same. Since the inline span element can be nested inside anchors and buttons, it doesn't break the W3C HTML5/XHTML5 rules.

And Aequanox made the solution perfect! Look at the answer below.

The whole story is published here: Animated anchor and button with css3

Upvotes: 2

Views: 1148

Answers (2)

Aequanox
Aequanox

Reputation: 566

You could avoid inserting the tag, thus mantaining the markup cleaner, by inserting this in the css:

.button:before{
    content:'';
    position:absolute;
    top:0; left:0; right:0; bottom:0;
 }

The text will not be selectable though

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

It seems the :active transition is replacing the click event. I'd consider this a browser bug.

Here I've changed :active to a class name .active and apply is in your event handler:

$('#linkbutton').click(function(){
    $(this).addClass('active');    
    $(this).delay(200).queue(function() { $(this).removeClass('active');})
    $('#logContainer').append('<span>clicked </span>');    
});

For some reason this didn't work until I changed .button from:

display: inline-block;

to:

float: left;

Go figure... It works now though.

Upvotes: 1

Related Questions