I've come across a strange issue involving CSS3/HTML5/Javascript on Webkit browsers (have not tested on others).
Check out this fiddle and see for yourself: http://jsfiddle.net/tbergeron/XHQxH/
If you hover over multiple "tiles" quickly, you'll notice that sometimes it stops working.
The javascript code in question is:
$('.tile').one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
var tile = this;
// Hide Title label
$(tile).find('.title').hide();
var bigTileHtml = '<div class="bigTile">';
bigTileHtml = bigTileHtml + '<div class="title">Tile Title Holy Cow Yeah</div>';
bigTileHtml = bigTileHtml + '<div class="description">Tile description goes here.</div>';
bigTileHtml = bigTileHtml + '</div>';
// Create a new bigTile
var bigTile = $(bigTileHtml).appendTo('.tiles');
// Sets bigTile's position
var position = $(this).position();
bigTile.css('top', position.top + 4);
bigTile.css('left', position.left + 4);
bigTile.mouseout(function() {
// Show Title label
$(tile).find('.title').show();
bigTile.remove();
});
bigTile.show();
});
You can view the HTML/CSS details in the fiddle provided above.
EDIT: The issue appears to be that the "webkitTransitionEnd" event only fires once. Is there a way to reset this behavior so that it can be fired again after each transition ends?
In short, when hovering over tiles multiple times, the pink div may stop displaying.
Thank you to anyone who can offer assistance.
/tommy