search

thephpleague / glide

Wonderfully easy on-demand image manipulation library with an HTTP based API.
http://glide.thephpleague.com
MIT License
2.54k stars 198 forks source link

Black border added to images during processing #369

Open univers-andrew opened 1 year ago

univers-andrew commented 1 year ago

Similar to this previously closed issue: https://github.com/thephpleague/glide/issues/103

I'm also observing this same issue when using Spatie's 'Responsive Images' addon for Statamic, which is using Glide under the hood.

It seems like this has been an ongoing issue for sometime, but hasn't reared it's head enough to be esacalated, Saw a few different comments/threads on Statamic's different support channels like this one: https://statamic.com/forum/5378-glide-images-black-top-border. I remember having the issue myself on a previous project, but managed to find a workaround at the time.

I have confirmed the original image file(s) don't contain any border, and there aren't any transparency issues at play as the source files are jpgs. I can also confirm there is no CSS at play creating the border — it's within the generated image output.

I'm not doing anything particularly unusual. Here's the snippet I'm using with Spaties responsive images tag:

{{ responsive:image alt="{alt}" ratio=".75" glide:width="900" }}

Strangely enough, when I remove the glide:width="900" attribute (which sets a max width of variations to be generated) the border dissapears.... when I add it back the border returns! It doesn't happen on all images, so it seems like it could be a bug/issue depending on the cropping required for that specific image, but that's just speculation on my part!

This is happening with the default GD driver, haven't tried using Imagick for this site yet, but will test this down the track possibly.

Some screenshots for reference below:

Screenshot 2023-04-25 at 11 32 37 am Screenshot 2023-04-25 at 11 59 30 am

Happy to supply further info as required. Would love to assit in squashing this bug — it's the only issue I've had with Glide to date! if you think I should raise this directly with Statamic as well do let me know

With thanks, Andrew

ADmad commented 1 year ago

Have you checked with imagick instead of GD? If the issue occurs with both drivers then it could potentially be some rounding/casting issue when calculating dimensions for resizing. Someone will have to track it down and provide a patch to fix :slightly_smiling_face:.

univers-andrew commented 1 year ago

Hi @ADmad — have now checked gd vs imagick and only noticed it present on the standard gd driver.

When processing with imagick the black border/line doesn't appear...

Hope that helps!

ADmad commented 1 year ago

That means the issue is driver specific and not related to the dimensions calculation, which might be more difficult to track down / fix. Could be an issue with one of the GD functions itself.