I'm trying to make animating sprites that are clickable without using flash. On click (or touch), they should display a popup bubble. When the screen is clicked again (anywhere, be it on the icon, the bubble, or outside both,) it should dismiss. The issue is that clickable areas don't align with their sprites.
Here's the webpage:
https://dl.dropbox.com/u/60354330/site/index.html
The clickable area for each of these pipes is an area of the same size as the sprites, but centered on the corner that's on the outside edge on the side that the steam flows from.
I have tested this on Safari 6 (Mac,) iOS 6, Android 4.0's browser, and Chrome (version 21 on Windows 7?) and the behavior is the same in all of those browsers.
Any suggestions on why it doesn't line up or how to fix it?
All of the relevant code is in index.html. Here's what I believe the relevant excerpts are:
It gets scaled down and back up because otherwise it'll roll from frame to frame.
It seems like the issue is that the clickable area scales up from a different origin than the rest of the div, but if I change the transform origin to something else, say 50% 50%, it's still offset by the same amount. Translating the div gets applied the same way to both the clickable area and the div, thus that can't be used to fix the issue either.
Here's the webpage:
https://dl.dropbox.com/u/60354330/site/index.html
The clickable area for each of these pipes is an area of the same size as the sprites, but centered on the corner that's on the outside edge on the side that the steam flows from.
I have tested this on Safari 6 (Mac,) iOS 6, Android 4.0's browser, and Chrome (version 21 on Windows 7?) and the behavior is the same in all of those browsers.
Any suggestions on why it doesn't line up or how to fix it?
All of the relevant code is in index.html. Here's what I believe the relevant excerpts are:
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS sprite demo</title>
<style type="text/css">
.spipe
{
position: absolute;
width: 1px;
height: 1px;
background: url(spipe.png) no-repeat 0 0;
background-size: 1px 20px;
-webkit-animation-name: spipe;
-webkit-animation-duration: 1.0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-transform-origin: top left;
}
.left
{
-webkit-transform: scale(100, 60);
}
</style>
</head>
<body>
<div id="toppipe" class="popup spipe left" style="top:120px;left:200px;" popupHTML="<b>Hello</b>,<br><i>Top</i>"></div>
</body>
</html>It gets scaled down and back up because otherwise it'll roll from frame to frame.
It seems like the issue is that the clickable area scales up from a different origin than the rest of the div, but if I change the transform origin to something else, say 50% 50%, it's still offset by the same amount. Translating the div gets applied the same way to both the clickable area and the div, thus that can't be used to fix the issue either.
