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 extraordinary?
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
hardware acceleration 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
something that nobody uses?
How can we use something 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
Hageland 28.sep.2016
last rev: 29.sep.2016