css - Link doesn't behave correctly (because of webkit transition?) -


i using following code found on web create these "roll" links seem not work correctly meaning when clicked jquery script(animate anchor) doesn't execute. seem happen on chrome(version 28.0.1500.95) only.

to reproduce issue, go jsfiddle: http://jsfiddle.net/gsjcv/2/ , hit link multiple times(hit - scroll - hit again) , notice sometime stucks , doesn't work. removing "roll-link" css makes work, ideas it's causing this?

css:

.roll-link {     display: inline-block;     overflow: hidden;     vertical-align: top;      -webkit-perspective: 600px;        -moz-perspective: 600px;        -ms-perspective: 600px;        perspective: 600px;      -webkit-perspective-origin: 50% 50%;        -moz-perspective-origin: 50% 50%;        -ms-perspective-origin: 50% 50%;        perspective-origin: 50% 50%;  }  .roll-link span {     display: block;     position: relative;     padding: 0 2px;      -webkit-transition: 300ms ease;        -moz-transition: 300ms ease;        -ms-transition: 300ms ease;        transition: 300ms ease;      -webkit-transform-origin: 50% 0%;        -moz-transform-origin: 50% 0%;        -ms-transform-origin: 50% 0%;        transform-origin: 50% 0%;      -webkit-transform-style: preserve-3d;        -moz-transform-style: preserve-3d;        -ms-transform-style: preserve-3d;        transform-style: preserve-3d; } .roll-link:hover span {         background: #333;          -webkit-transform: translate3d( 0px, 0px, -30px ) rotatex( 90deg );            -moz-transform: translate3d( 0px, 0px, -30px ) rotatex( 90deg );            -ms-transform: translate3d( 0px, 0px, -30px ) rotatex( 90deg );            transform: translate3d( 0px, 0px, -30px ) rotatex( 90deg ); }  .roll-link span:after {     content: attr(data-title);     display: block;     position: absolute;     left: 0;     top: 0;     padding: 0 2px;     background: #060606;      -webkit-transform-origin: 50% 0%;        -moz-transform-origin: 50% 0%;        -ms-transform-origin: 50% 0%;        transform-origin: 50% 0%;      -webkit-transform: translate3d( 0px, 105%, 0px ) rotatex( -90deg );        -moz-transform: translate3d( 0px, 105%, 0px ) rotatex( -90deg );        -ms-transform: translate3d( 0px, 105%, 0px ) rotatex( -90deg );        transform: translate3d( 0px, 105%, 0px ) rotatex( -90deg ); }  div{     padding-bottom:450px;     background:#000;     color:#fff; }


-

Popular posts from this blog

java - Cannot send AES encrypted messages of over 47 characters -

ello mates! creating aes encrypted chat program have ran issue; whenever message on 47 characters, displays "javax.crypto.illegalblocksizeexception: input length must multiple of 16 when decrypting padded cipher". understand error message can't seem figure out how fix it. here full code: chatclient.java package chat.application; import java.awt.event.actionevent; import java.awt.event.actionlistener; import java.io.bufferedreader; import java.io.ioexception; import java.io.inputstreamreader; import java.io.printwriter; import java.net.socket; import javax.swing.jframe; import javax.swing.joptionpane; import javax.swing.jscrollpane; import javax.swing.jtextarea; import javax.swing.jtextfield; import javax.swing.text.*; import java.security.*; import java.util.logging.level; import java.util.logging.logger; import javax.crypto.*; import javax.crypto.spec.secretkeyspec; import sun.misc.*; import java.net.inetaddress; /* * known bugs: * message size limited 47...
Read more

telerik - Reformat image format in PDF -

i got issues in rendering couple of images , texts in pdf in telerik pdf viewer - according telerik's documentation seems texts/images formats incompatible. are there ways convert existing images in pdf , replace pdf make file compatible telerik pdf viewer? many thanks
Read more

php - How to set default value of a select dynamically from database using smarty? -

i have select this: <select class="fruitsselect" name="fruits"> <option value="apples">apples</option> <option value="bananas">bananas</option> <option value="oranges">oranges</option> </select> and know can set default value if use selected attribute. <select class="fruitsselect" name="fruits"> <option value="apples">apples</option> <option value="bananas" selected>bananas</option> <option value="oranges">oranges</option> </select> but trying that, value retrieve database (i send html via php ) option retrieve database selected option (the default option). i have value on html not know how make selected option because can change. using smarty , trying make ifs statements cannot out. how can compare value retrieve database value of select , make...
Read more