Skip to main content

Troubleshoots (or browsers bugs)

A few years ago when I created a small program in Flash. I remember how frustrating it was to find out that some bug that i had was actually a Flash’s bug and not a problem in my code. But today Flash isn’t relevant anymore, and we enjoy 5 times bugs we need to struggle with, because suddenly the same code has 5 different interpreters aka Chrome, Firefox, Internet Explorer, Safari and Opera. The sad part of course is that it’s our fault, the designers and the developers when something doesn’t work right. The user doesn’t know and doesn’t care about browsers’ bugs and sometimes we need to change very fundamental things in the user experience of our sites and our programs. In my site I found so many different bugs. The good news that most of them are already issued if not fixed in nightly versions, but there are still trouble with some.

Those are part of the bugs I found when I created my website:

  1. REM unit is some how isn’t stabled yet in every browser. usually browsers stretch vector images like it was bitmap images. On IE and Firefox if you use an SVG file in background-image property and change the size, the browser stretch it like it was a bitmap image
  2. On All browser exclude Internet Explorer 10 and Firefox on Windows, if you have a shape moving using GPU acceleration inside a shape with border-radius and overflow: hidden properties, the internal shape ignores the border-radius of property of its container while moving.
  3. Safari 6.0, Chrome 26 and Opera 12.14 have a bug that related to mouse cursor change and transition. If there is a layer with a cursor value that moves using css transitions, then the mouse cursor won’t change until you move the mouse.
  4. Safari 6.0 and Chrome 26 have a bug that they don’t fire 'mouseenter' and 'mouseleave' event if the DOM node contains an element that spread all over the shape. I haven’t really read the specification so I can’t say if the fact that Firefox and Opera fire the events, they actually have the bug instead, But css :hover fired on every browsers, might indicate the issue.
  5. Internet Explorer (10 and maybe below) doesn’t put a fixed element on top of the stack, no matter what is the z-index, it treats it like it was with a value of z-index: -9999. It happens if there is no background-color property, and if the property is transparent it will ignore, but surprising rgba(0,0,0,0) would work! If you ask what is for, it’s for creating a button that the only visible hint is mouse cursor.
  6. On mobile version of my site on Chrome 26 (at least the desktop version), there is a flickering. It happens after the animation of a work getting out of the screen happen. You suddenly see the previous work for a moment even it’s removed from the DOM.