Using: Chrome 18.0.1025.151 on MAC OSX 10.6.8
I'm running into an interesting issue. When using Chrome the cursor property only changes if you hit the very edge of an DOM object. For example: in the below usage the cursor will only change to the "move" cursor on the very edge of the image. When its completely over the image it goes back to the pointer?
Any idea whats going on here?
CSS:
.handle{cursor:move}
Usage:
<img alt="Lounge" class="handle" src="SOME URL" />
Try
Width
Height
Block
So:
.yourObject {
position: relative;
width: 50px;
height: 50px;
display: block;
cursor: move;
}
I had the same bug on my Macbook Pro running 10.12.3. It appears to be caused by other programs. When certain programs are open/in certain states, cursor: CSS rules will only work on object edges, regardless of browser. Experienced this bug with both Spotify and Intellij IDEA.
Try closing out your programs one by one until it behaves properly.
Related
I have a paper-fab on my index page and it is displaying right until I tap on it. I say tap because this behavior only occours in mobile environment (in the chrome mobile view or on my Nexus 5).
This is the active button (on tap):
Note that the background is light gray. This square around the button is what I want to remove. The button is perfectly round. But this thing appears when tapped.
I tested other applications, like Topeka, and the active button (on tap) displays right:
But aparently there's nothing in special between my paper-fab and Topeka's one.
Here's the element declaration and the CSS:
<paper-fab icon="add" id="add-button"></paper-fab>
paper-fab#add-button {
position: relative;
background-color: #3F51B5;
display: block;
margin-bottom: 15px;
}
Is there something wrong?
Thank's in advance.
Your silver bullet is:
body {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
I suggest also that you attended to specify shim-shadowdom parameter for your style declaration:
<style shim-shadowdom>
BTW, you might want to compare your code against official paper-fab docs rathen than topeka.
Hope it helps.
I have a number of divs covering a different portions of a menu on a background image on a webpage.
Within the div I hav an a href to link to another page a play a click sound
I've used a CSS trick to fill the div so that the cursor changes right across the div. See the code below
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
<div id="apWelcome">
</div>
The CSS for apWelcome and to fill out the area is listed below:
#apWelcome {
cursor: pointer;
position: absolute;
left: 104px;
top: 216px;
width: 49px;
height: 66px;
}
a.fill-div {
cursor: pointer;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
The problem is that in FF24 the click behaviour is fine but nor sound, Chrome - half-works (sound plays)- visually the page jumps down, IE does not display cursor or has no functionality.
Anyone know a workaround for this for all three browswers or a completely different method. Thank you.
read this article about sounds in html (cross browser).
the different browsers allows differnent types of sounds files.
also, you dont have to use your div as placeHolder for the a tag, you can directly call your function from the div's onclick (with cursor:poiner; you wont notice any difference)
See this Fiddle, a complete solution: http://jsfiddle.net/avrahamcool/ybxBq/
I've rebuilt the entire layout from scratch.
you can download it from here (I will keep the link alive for a week)
I dont know if it was necessary, but.. it was easier for me.
I'm using an img in BackgroundContainer and not CSS background, that way: if someone prints the page, he still sees the background.
I'm using fixed height&width for the 'Site', but all of its content is in %. so it should scale beautifully if the size of the site change.
for testing in IE, you have to run the HTML from a server (and not from the local file) - so the browser wont stop the script
I've deleted almost all your scripts, so put them back (one by one, each time make sure the page is still working in all browsers)
NOTICE that I've change some of your classes & files name, so check your scripts and CSS's accordingly (also, I rearranged the Image folder).
tested on IE10, FF, Chrome
notice the url(dummy) as background-image for the clickable elements.
good luck.
Decision to Close:
I've decided to close this question as it denotes a behavior that is not currently observable with the more recent versions of Google Chrome, and is no longer an issue that requires mitigation.
Problem:
For a long time, I've been noticing that when hovering over anchor elements in Chrome, the cursor will remain in the default (arrow) state rather than switching to the pointer (hand) state. I have not observed this behavior when viewing sites in Safari, so I'm not certain this is a webkit issue.
Questions:
What's causing this? What are the workarounds?
Evidence:
I've found this behavior will happen...
less often after the page is loaded.
more often while the page is still loading.
more often, if not exclusively, when a elements have a display property declaration.
regardless of the cursor: pointer property being declared (although, I could be wrong).
Note the mouse behavior on this example when viewing in Chrome:
The main navigation of this site: http://css-tricks.com/
Suspicions:
Chrome has an issue handling a elements with a display property declared with a value that differs from the default inline. I also suspect that declaring the position property on a elements with a value that differs from the default static may be contributing to the problem.
Possibly Related:
Chrome hover custom cursor
Bug in Chrome or bad CSS? (anchor with visibility hidden)
http://code.google.com/p/chromium/issues/detail?id=93240
Did it happen when your chrome dev tools was open ?
If so, maybe you should disable "Emulate Touch events" in the Overrides Settings of the dev tool.
Cheers
This has happened to me before, and I realized putting a positioning to the element will fix it. For ex:
header a.logo{
position: absolute;
float: left;
height: 28px;
width: 28px;
margin-top: 15px;
text-indent: -9999em;
display: block;
}
Hope this helps.
I'm designing a site (a customer portal) that will probably be used with mobile/touchscreen devices at some point in the future. In the past I've used CSS code like this:
div.Info
{
display: inline;
position: relative;
text-decoration: none;
}
div.Info span.InfoDetail
{
display: none;
}
div.Info:hover span.InfoDetail
{
padding: 3px;
display: block;
position: absolute;
top: 1em; left: 1em;
border: 3px inset Gray;
background-color: White; color: #000;
text-align: left;
white-space: nowrap;
z-index: 25;
}
to create little CSS popups that display on mouseover and they seem to work very well. However I'm conscious that this may or may not work on touchscreens so I was wondering what the "correct" behaviour was as there doesn't seem to be much consistency that I've found across the limited amount of mobile browsers I've been able to look at. I had looked about a bit and it seems that this hover event may activate if the object gains focus, so I created some test code at http://mad-halfling.webs.com/testcode.htm that displays a small popup if you mouse over the "Mouse over for detail" text or the little up-arrow image:-
on iOS (I found a demo iPad in a shop to test it) this doesn't seem to work (I only tried the text as I have only just added the image)
on MicroB on my N900, tapping the text and image both bring up the popup, fine
on Firefox (I believe it's Fennec) on my N900 tapping on either does nothing
What's your take on this - it seems a shame as it's such a useful way of making popups without having to resort to javascript, but if it won't work with touch-screens going forward I'm going to have to rethink my strategy
Cheers
MH
The fundamental problem with mouseover, including when it is used for desktop websites, is that there is no UI indication of a behavior.
This isn't a definitive answer but I've noticed that in places where you would be using "mouseover" now on a mobile device you can use "long touch". The problem though is that nothing on the UI indicates that behavior. (To be fair UI conventions that have no indication have been around for a while, like double clicking).
The rule of thumb probably should still be that just like mouseovers, critical functionality shouldn't require them.
Why not have a image of a question mark in a circle (which seems to be common idiom) near whatever you'd like a popup for, and have that have onhover and onclick functionality to display your documentation?
First post from a lurker, so please bear with me.
In my company's Facebook app, there's a form that can have error messages, which are getting double left padding. They have a fair bit of padding to line up with the inputs above them (which also get the left padding).
(Broken error message img) http://img687.imageshack.us/img687/2609/windows7x64ie9beta2.png
When I pop this same page out of the Facebook iframe, it displays normally, with form elements and error messages lining up.
(Non-broken error message img) http://img535.imageshack.us/img535/651/windows7x64ie9beta14.png
The actual code is an inherited (in all senses of the word) mess, but does work in everything including IE6 & 7 with no hacks. Here are all of the non-reset-styles on these lis:
clear: none;
font-size: 12px;
margin-bottom: 0;
margin-top: 5px;
overflow: hidden;
padding-left: 160px;
I've confirmed that doubling the padding yields the messed up view (I can only use IE Developer tools in the non-messed up view since it can't handle the iframe).
Anyone have any idea? Other than ripping up this old code and starting over?
UPDATE: Seems like ripping up the old code might be a necessity. I have some ULs with no children that might be causing some breakage.
UPDATE 2: The dynamically generated dom is a mess, but the engineers here have no time to refactor it, so I may never get the answer to this question. :(
This may not be an ideal solution, but I would use a condition and a separate IE9-only stylesheet to fix this issue.
Something like:
<!--IF[IE 9]-->
// Include IE9 stylesheet here
<![endif]-->
and in that stylesheet maybe do something like this:
clear: none;
font-size: 12px;
margin-bottom: 0;
margin-top: 5px;
overflow: hidden;
padding-left: 80px; /* half the padding */
Are you using floats? I reached this question via a similar problem.
Check out this answer: IE 9 CSS Float problem!