… a lost art?
I must confess that I am not chasing browser bugs as eagerly these days, as back when IE6 ruled the world wide web. Maybe I should, as today's browsers have more than enough bugs to keep an old and semi-retired troubleshooter from getting bored.
New browser versions with bug-fixes are released quite often, but it may take a while to get unreported bugs fixed. Even reported bugs may be left in place for years, as site developers learn to work around them and minimize the problems – just like back in time.
It can be a bit more demanding to pinpoint and intentionally trigger, and then debug, bugs in today's browsers than it was a decade ago. Triggers are often burried deep in more complex CSS – in style combinations that are not used very often and browser developers therefore don't test and debug their software properly for.
New bugs quite often show up after software developers report that they have fixed other bugs and/or made their latest software version more efficient. So also this time, as the “opacity artifact” bug I deal with here first caught my attention in Blink based browsers in July 2017, and I may have overlooked this obscure bug for months.
the “opacity artifacts” bug!
The rendering bug I am chasing now, is very unstable. It may be the result of corners being
cut to make the rendering engine appear to work faster.
Allowing for a few more iterations when calculating final rendering of pages, would probably eliminate this, and quite a few more, rendering bugs.
I have managed to catch the bug on screenshots, but a reload or a change of window-width
in the affected browsers may make the artifacts disappear or show up differently and in different places in/near the same area. Even scrolling
up and down can make the artifacts come and go.
Some variations in how the artifacts look in different browsers on the same engine – Blink, but it basically is the same bug, triggered by the same, complex but perfectly valid, element styling.
case at hand…
The side-column in all pages on this site is made up of a large absolute positioned generated content area that carries the visual background and border – makes the side-column look like it does, with the content container floated on top. A slightly unusual but perfectly valid method for achieving “visually equal height columns”.
If I declare
opacity on that generated content element the visual side-column is made up of, artifacts
– misplaced and more or less incomplete bits of the vertical border on that generated content area – may show up in the
Bug observed in Chrome, Opera and Vivaldi.
In addition: declaring
opacity on the in-page link that is absolute positioned in top right corner of the
page, tends to make incomplete “visual copies” of that same link show up anywhere in the side-column vertically lined up under
that in-page link.
Bug observed in Chrome and Vivaldi, but not in Opera.
All observations, testing and debugging done on three laptops with varying hardware, all running windows 10.
Opera and Vivaldi have a few extensions – Adblock, Ghostery, etc, while Chrome has no extensions.
What triggers this rendering bug is still somewhat unclear, but as far as I can see, declaring
opacity on certain style
combinations triggers the bug. The simple workaround – used on all but this very page – is to not declare
on the elements mentioned browsers obviously have problems with.
Having to leave out useful and valid CSS properties because browsers mess up, is not a very satisfactory solution. Doesn't cause any real problems for this particular site design though.
This “opacity artifacts” rendering bug is very much an open case, and I have written this page as a reminder to myself for how to deal with similar cases. Hopefully I won't have to take more actions.
last rev: 17.sep.2020