Filter drop shadow bug

[Doobox (Doobox Software)]

Currently applying a static drop shadow filter to an image yields the following markup:

transform-gpu is being added to the wrapper div around the picture element.
This causes the drop shadow to be clipped on page load.

If I add the following custom css to the page (same as transform-gpu) the shadow renders properly, suggesting that the transform-gpu should actually me applied to the image it’s self and not the wrapper div to function correctly.

img {
    transform: translate3d(0, 0, 0);
}

Long story short:
transform: translate3d(0, 0, 0) / transform-gpu, does not cascade to child elements.

[dan]

I’ll get @ben to take a look, and he’ll be able to explain the nuances of this better than I can.

I’d recommend using a box shadow instead, I’ve tested it and it’s working just fine. You can find that under Effects

[Doobox (Doobox Software)]

Problem is Box shadow is just that (a box), no good for png’s with transparency.

[upssjw (Steve W)]

all png, not sure if this is related, kind of works if you apply a border radius, with no corners the other with corners

[upssjw (Steve W)]

with the image having radii the background is transparent I suppose

[Doobox (Doobox Software)]

Thanks Steve, yes for specific images box-shadow can be a workaround. But it’s really more about fixing the bug in filter, so it works across the board.

[upssjw (Steve W)]

Agree. There is another bug? I did not show, changing shadow colours/sizes it forgets the radii until you change the shadow back and forth

[Doobox (Doobox Software)]

I think I highlighted another bug in the Image component in my video unwittingly.

Image component > Advanced > classes & ID, should also be added to the image tag where you’d expect them to be added, and not on the outer parent div as they currently are.

[Doobox (Doobox Software)]

Further testing (I can’t put stuff like this down ) tells me this is a race condition.

It explains why it works inside of the elements UI, and fails in the browser. Inside Elements, the image is on hand. In the browser it takes time to load, and until it has, well the browser does not know where to render the shadow,

transform-gpu simply gives the image a chance to load while it’s doing its thing that takes the browser an arbitrary time to promote the image to the GPU. Confirmed by using.a large uncompressed image that takes a while to load, even adding my workaround does not work.

transform-gpu, will-change-contents, and image priority high, all help, but non are failsafe. If the image loads slow it fails and clips the shadow. The browser seems to simply give up after a finite time trying.

So this does seem to be on the face of it a browser bug (webKit) else drop-shadow CSS was never designed for transparent images.

[Doobox (Doobox Software)]

Yeah, giving up now. There’s something wrong I’m just not seeing with the way the filters are being applied. It’s the same deal for “Blur”.

So I thought ok, I’ll use a copy of the image (blurred) behind the visible image to make the shadow. It is actually even nicer as you get the colours from the image its self.

But no it’s the same deal. Absolutely position a duplicate image under visible image and apply filter blur, works inside elements UI but again gets clipped in the browser.

The only thing that actually works is a three layer setup.
The duplicate image absolutely positioned, then a fleck box absolutely positioned over it with background blur, then the visible image stacked on top. Works a treat. but oh my, thats some workaround.

Inside Elements both methods work:

But in the browser directly blurring the underlaying image gets clipped.

This project file : elementsapp://downloadDocument/zop8DLYmtT5Y

[Doobox (Doobox Software)]

So it is in fact a Safari only bug. Not webKit as such.

It’s fairly widely documented. (Note to self: Next time search the internet first).

All three methods work fine in Chrome and Firefox, Only Safari sees the issue on teh last two methods. No workaround without hacky JS

[Doobox (Doobox Software)]

Well something came out of the learning curve today at least (all browser compatible).

[dan]

Oh that looks nifty, nice work!

[Doobox (Doobox Software)]

Epiphany this morning, for anyone following along…

There must be a way to get Safari to render a filter drop-shadow on an image right? There is! and it’s simple.

Convert the image to an SVG! Safari renders the drop shadow properly

[dan]

That’s a good tip.

I love(d) Safari, but more recently it’s been giving me bad Internet Explorer vibes, not to mention some web apps just won’t run in it

I’ve been finding Firefox a lot more reliable with page rendering

[Doobox (Doobox Software)]

So I went ahead and made a little utility app to convert bitmap images to SVG’s to save opening and re-exporting from a fully fledged image editor. It’s free, but does require macOS Tahoe for simplicity (my side).

New Download: 1.0.1
Added Sparkle updater for future updates and couple of fixes.
Download Vexel App