there will be browser bugs

and not all are easy to find and squash

Officially my bug-hunting days more or less ended with IE6/7, and the infamous haslayout bug. Browser bugs do however show up even when I'm not actively hunting for them, and if they are too bad I have no choice but to figure out what cause them and how to work around the problems.

Most browser bugs are found around edge cases. When we combine properties and effects on elements in ways that haven't been used much or wasn't possible before, it is easy to unintentionally push browsers onto and over the proverbial edge where they may reveal all kinds of strange bugs and weaknesses.

The bug presented on this page, was discovered after a page had been online a few days. Despite my principle of leaving browser bugs to those who created them, this bug was too visible and irritating to leave alone. It is also a bug I may run into again, and again, so finding out what was going on was worth a few rounds of debugging.

filter/​transform combo bug

First: here is the page that originally revealed the filter/​transform combo bug. Bug-affected object is the same “rocking” accessible symbol image that is shown here, and the original page – with bug-trigger and all – is kept for future testing.
For comparison: here is the reloaded page, now without the filter effect but with all else the same. Works flawless in all browsers I have tested in.

howto provoke the bug…

What happens if @keyframes rotate transitions are combined with drop-shadow filter on an image with float and negative top margin declared? Nothing extra­ordinary?
Right, all is seemingly good across browser-land.

Now scroll the page so that only the top part of the styled image disappears above upper window edge – this link will help, and wait for the @keyframes transition to go through its phases.
When the @keyframes rotation brings it more than about ±1° off center, Google Chrome(53) and Opera(40) makes the image become unstable and jump down without taking up more space. That is: lower part of image overflows its space and gets hidden.
Hilarious … a genuine Blink bug‽
See screenshots for Chrome and Opera in side notes.

The only fix I have found so far, is to remove the drop-shadow filter from that particular element with the @keyframes transition effect applied. Changing or removing other property/value pairs have no effect.
The combo seems to work flawless on smaller elements, and is used in the overall page design.

Is drop-shadow filter really necessary? Can it play a role on images with transitions?
Most definitely, both as drop-shadow (of course), and to smooth out rough edges. A filter will also invoke hard­ware accel­era­tion on devices that provide it, which makes transitions look a lot smoother than what browsers' rendering engines can achieve by themselves.

while waiting for a bugfix

Leaving out styles and/or effects to avoid browsers' rendering bugs, is wrong in a way. Not something I like to do since it further limits my already quite limited design options.

Also, when a style combo doesn't get used, browser bugs related to it most likely won't be fixed anytime soon. Why should they fix some­thing that nobody uses?
How can we use some­thing that doesn't work?

Oh well, I'm gonna use this page as a kind of center-point for testing out which of these combos I can use and which ones that cause buggy behavior in browsers. Another side-show on site.

sincerely  georg; sign

Hageland 28.sep.2016
last rev: 29.sep.2016

www.gunlaug.comadvice upgradeadvice upgrade navigation