Google Chrome keypress bug

Dinulescu Alexandru Adrian — Sun, 22 Nov 2009 17:38:22 +0000

Hello

Did you knew that Google Chrome does not understand keypress() on special keys like arrow keys/esc/enter/etc ?

Me neither

I was trying to get the following code to work and it didnt work in Google Chrome at all

$(window).keypress(function(e){
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 32 || (65 <= code && code <= 65 + 25) || (97 <= code && code <= 97 + 25)) {
alert("haxxor");
}
$(window).keypress(function(el){
var alphaCode = (el.keyCode ? el.keyCode : el.which);
if (alphaCode == 37) {
alert("left key");
}
if (alphaCode == 39) {
alert("right key")
}

if ( alphaCode == 13) {
alert ("enter key")
}
if ( alphaCode == 27) {
alert ("escape key")
}
});

The first function works, the second works in Firefox but not in Chrome. After much headbanging around the room i tried to replace keypress() with keydown() and surprise suprise, now it works. I really dont know what to say about this bug, works with any normal key but not with special keys. Do take notice of this bug so you dont waste 30+mins trying to figure out why this happens

Cheers

Webkit Absolute Positioned Floated Element Bug

Dinulescu Alexandru Adrian — Wed, 27 May 2009 08:26:16 +0000

Hello

While i was building a webpage for a client, i came across a very peculiar issue. It seems that webkit (safari/google chrome) have troubles understanding an absolutely positioned floated element

This is the HTML for the file in question.

<ul>
<li class="selected"><a href="#"><span>Ficha Tecnica</span></a></li>
<li><a href="#"><span>Ubiccaon Y Aroso</span></a></li>
<li><a href="#"><span>Galeria De l'image</span></a></li>
<li><a href="#"><span>Pricipaples operandos</span></a></li>
<li class="last"><a href="#"><span>Mas Information</span></a></li>
</ul>
<div class="clear"></div>
<div class="stuff">
Relative Positioned Stuff Goes here
</div>

The CSS looked like this

.content .container { width: 600px;}
ul { margin: 0px 0px 0px 0px; height: 32px; position: absolute;}
ul li { float: left;}
ul li.last { background-image: url("./../img/containerB.png");
background-repeat: no-repeat; background-position: right bottom;}
ul li a { color: #616266; float: left; background-image: url("./../img/containerB.png");
background-repeat: no-repeat; background-position: left bottom; text-decoration: none; }
ul li a span { padding: 11px 5px 7px 5px; line-height: 14px; display: block;
background-image: url("./../img/containerInnerB.png"); background-repeat:
repeat-x; background-position: bottom left;}
ul li.selected { background-color: #fff;}
ul li.selected a span { background-image: none; font-weight: bold; color: #15575d;}
ul li a:hover, .content .container ul li a:focus { text-decoration: none; }
.clear { clear: both; height: 0px; overflow: hidden;}

This happens in Safari/Google Chrome

The image shows HOW Safari/Google Chrome behaves, IE6/IE7/FF3/Opera9.5+ work ok, but everything based on webkit breaks

After fiddling around with the CSS lines i think i found out what happens

Given that the ul element is absolute positioned, it is OUTSIDE the normal pageflow, however it breaks everything after it, because li elements are floated. so an empty clear div should be put there. In normal circumstances like these

everything after the 2 floated elements will resume it’s normal position, however in this case, since the LI elements are somehow outside the page-flow but they are floated, they break the pageflow. Now the surprising thing is that the div.clear is not doing it’s job to put the page in order in webkit. I dont know why since it’s a block type element and in all other cases it works, here however you need to have him not only as a block element but also it needs to have a height of 1px or more.

After putting the height 1px to the clear div, it started to behave properly in Safari / Chrome. Very weird bug, even more weirder than those on IE6/IE7

Questions in comments

Cheers AlexD

Alexandru Dinulescu's Thoughts» Chrome Bug

Google Chrome keypress bug

Webkit Absolute Positioned Floated Element Bug

This is the HTML for the file in question.

The CSS looked like this