On June 7, 2018 I released an update for Reveal which helped to allow its Flip In X and Flip In Y animations work when placed inside of a Banner or Backdrop stack that had the new Parallax feature enabled.
The bug the update was fixing was one where the two aforementioned animations would cause Reveal’s contents to be hidden behind the Banner stack after the animation completed, along with looking a bit funky during the animation as well. This is caused by a bug in Safari’s Webkit. This means the bug is only seen in Safari or browsers that make use of Safari’s Webkit – like RapidWeaver’s Preview Mode.
The bug is caused by Webkit trying to render the intersection of transformed elements. In this case the Banner is being transformed by the Parallax effect and the Reveal stack is transforming its contents via some CSS animations.
The fix I put into place was really just a hack to fool Webkit and make things work for Safari and RapidWeaver’s Preview Mode, as other browsers like Chrome and Firefox display the interactions with no problem as they do not have this bug.
Let me note too that, after some research, I’ve found reports of this bug in Safari back to at least 2013.
That said the hack I put in place does clear up the bug with Reveal and Banners using the Parallax effect, but it and a user reported bug with Zoom lead me to look at this stuff closer.
The recent user reported bug was one where the Zoom stack would appear to be behind other elements on the page, regardless of their z-index values, when placed into a Reveal stack. This stems also from this weird transform bug it seems. Though thanks to the “fix” (hack) I put into place for the interaction between the Banner’s Parallax feature and the Reveal stacks Flip In X and Flip In Y animations the Zoom and Reveal combo also fails in Chrome and Firefox as well.
I’ve spent a bunch of time working on a way to fool Webkit to make these interactions work as they should and as other browsers properly display them, but so far have not had any luck.
So why this post then if I don’t have news of a fix for this weird Webkit interaction? It just mostly just a sort of Public Service Announcement to make sure people know of this weirdness in case you come across it. For now I would advise not using the Zoom stack inside of Reveal, or other stacks that may use CSS animations or transforms as you may run into this weird corner case.
I’ll keep looking at the problem though to see if I can figure out a good solution to the problem as well as keep an eye out for any news of a fix in this Webkit bug.