Chrome Blink issues

July 12, 2013 - By

Chrome Blink went to the masses today, and unexpectedly I found my first buggy thing about the new JS rendering engine! I really didn’t think I’d even notice. Ironically, the effect was kind of blinky.

Update: Ok, I’ve found another issue. Renaming this post. More after the break! 

ISSUE 1: JS Rendering

The issue was on a box that you click to expand (I’d post it if it wasn’t a client’s site which isn’t live yet).

The JS is simple.

$item.toggle(function() {
 $(this).animate({"top": '0'}, 500).addClass('on');
 $(this).find('.story').fadeIn();
 return true;
 }, function() {
$(this).animate({"top": '50%'}, 500).removeClass('on');
 $(this).find('.story').fadeOut();
 return true;
 });

This worked great in Chrome 27, and every other browser. You click the item, and it animates the “top” value from 50% to 0. The issue (that the awesome Tim Ziegel thought of instantly) was that Blink is animating it from 50% to 0px. The solution was to match the units:

$item.toggle(function() {
 $(this).animate({"top": '0%'}, 500).addClass('on');
 $(this).find('.story').fadeIn();
 return true;
 }, function() {
$(this).animate({"top": '50%'}, 500).removeClass('on');
 $(this).find('.story').fadeOut();
 return true;
 });

I hope this helps someone!

ISSUE 2: Viewport indication

One of my favourite additions to the UI is the ruler / viewport size indicator that appear when you resize the browser. The problem? The viewport size is wrong! Consistently it was telling me my browser width was 830px, but it was 814px when I inspected the width of the <body>. Can anyone else confirm this?

Categorized in:

This post was written by ArleyM