# Filter drop shadow bug **URL:** \ **Category:** Elements\ **Created:** [October 10, 2025, 9:52pm UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653 "2025-10-10T21:52:52Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 10, 2025, 9:52pm UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/1 "2025-10-10T21:52:52Z")
Currently applying a static drop shadow filter to an image yields the following markup: ![CleanShot 2025-10-10 at 10 .43.11@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/a/da7d55be80138fbf8745e3b93ffc26fb2b324423.png) transform-gpu is being added to the wrapper div around the picture element. This causes the drop shadow to be clipped on page load. ![CleanShot 2025-10-10 at 10 .48.54@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/3/93f8e53e23ca1c3c9b38296a0e56155cc07399b4.png) 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. ```auto img { transform: translate3d(0, 0, 0); } ``` ![CleanShot 2025-10-10 at 10 .51.27@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/f/5fe5ba7696e801902d7e96e9d5088a87adf2de7e.jpeg) Long story short: `transform: translate3d(0, 0, 0)` / transform-gpu, does **not cascade** to child elements. ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [October 10, 2025, 10:08pm UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/2 "2025-10-10T22:08:29Z")
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 🙂 ![CleanShot 2025-10-10 at 11 .06.08@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/e/9e93e0d86ec3b6f743e0b5fb5c1730a9c37df0c8.png) ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 10, 2025, 10:11pm UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/3 "2025-10-10T22:11:26Z")
Problem is Box shadow is just that (a box), no good for png’s with transparency. ![CleanShot 2025-10-10 at 11 .10.04@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/5/155b395708d39203aa3568bfe968ce0051982634.png) ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [October 11, 2025, 5:28am UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/5 "2025-10-11T05:28:52Z")
all png, not sure if this is related, kind of works if you apply a border radius, with no corners the other with corners ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [October 11, 2025, 5:43am UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/6 "2025-10-11T05:43:59Z")
with the image having radii the background is transparent I suppose ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 11, 2025, 7:08am UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/7 "2025-10-11T07:08:55Z")
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. [https://www.doobox.co.uk/Vault/Video/forum-posts/filterBug.mp4](https://www.doobox.co.uk/Vault/Video/forum-posts/filterBug.mp4) ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [October 11, 2025, 7:12am UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/8 "2025-10-11T07:12:23Z")
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 ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 11, 2025, 7:59am UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/9 "2025-10-11T07:59:45Z")
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. ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 11, 2025, 9:45am UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/10 "2025-10-11T09:45:42Z")
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. ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 11, 2025, 1:09pm UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/11 "2025-10-11T13:09:54Z")
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: ![CleanShot 2025-10-11 at 2 .08.37@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/d/cd37c0b8451bad755a0c5c737aca820e360335ea.jpeg) But in the browser directly blurring the underlaying image gets clipped. ![CleanShot 2025-10-11 at 1 .58.02@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/c/ac75f03657cbfaf2905f8a629a1882757c2cb167.jpeg) This project file : [elementsapp://downloadDocument/zop8DLYmtT5Y](elementsapp://downloadDocument/zop8DLYmtT5Y) ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 11, 2025, 3:58pm UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/12 "2025-10-11T15:58:48Z")
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 😔 ![CleanShot 2025-10-11 at 4 .54.51@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/9/e9c55f558cafac7ae1f785fe23c2699327fe7cea.jpeg) ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 11, 2025, 8:36pm UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/13 "2025-10-11T20:36:18Z")
Well something came out of the learning curve today at least (all browser compatible). ![2025-10-11 9.31.46 pm](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/f/8/f8453a078b34e457a9fad0a97b2a87aeb0f73bb2.gif) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [October 11, 2025, 10:32pm UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/14 "2025-10-11T22:32:44Z")
Oh that looks nifty, nice work! ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 12, 2025, 8:06am UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/15 "2025-10-12T08:06:47Z")
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 🎉 ![CleanShot 2025-10-12 at 9 .00.05@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/6/66b7e3a465f86008e7ef79d16e599e919e06ed37.jpeg) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [October 12, 2025, 11:13am UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/16 "2025-10-12T11:13:34Z")
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 🧐 ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 12, 2025, 1:16pm UTC](https://forums.realmacsoftware.com/t/filter-drop-shadow-bug/51653/17 "2025-10-12T13:16:28Z")
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](https://www.doobox.co.uk/appcasts/xcode/vexel/Vexel.zip) ![CleanShot 2025-10-12 at 2 .16.15@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/4/447d5e9a2f0e1cfa64ed0776a5a306ae2687a52e.jpeg)