Wider upload area makes image preview gradient bleed excessively
dkulchenko opened this issue · comments
First things first, thanks for the awesome project! So excited to be using it. I noticed something when integrating it into my app:
It seems the overlay gradient height is somehow based on the width of the overall filepond area, so a narrow drop area like in the examples looks just fine, but place it into a wider div, and the gradient starts to bleed to an extent that the original image is heavily obscured.
Thanks @dkulchenko glad you like the project!
Yes, the overlay grows relative to the width, but it should be limited, will fix asap. In the meantime, you can add the following style to fix the issue:
.filepond--image-preview-overlay {
max-height: 7rem;
}Just published version 1.0.7 of the image preview plugin which should fix this issue.
I'm on version 1.0.9 and the issue still persists:
Setting max-height to 0 kinda solves the problem, although I don't really see what the overlay's job should be? Can you show me a print screen on how it should look? Thanks!
Wow, okay sorry, forgot to pull in the CSS file. Can you please add this to the documentation? Thanks!
@mywebstuff will do!
@mywebstuff done
I'm on 2.0.0 but still get this issue.
@ephes I've changed the gradients to SVGs in recent update so that might have caused this issue to return, but I believe I checked, will test and get back to you.
@ephes Add this temporary style, will release fix version later this week:
.filepond--image-preview-overlay svg {
max-height: inherit;
}Thanks for your quick response, but the temporary style doesn't make a difference for me. I'll just limit the width of the filepond container for now :).
Odd, in this codepen it seems to work, limiting the width will do just fine as well.
Weird, maybe it's because I'm using the angular adapter?
Could be that Angular is wrapping the style in something to make it local to your component? Oh well, fix coming soon :-)
Just published version 2.0.1 which should fix it.
Yep, 2.0.1 fixed it. Tanks a lot!
I just tested it on my iOS device and noticed that there the overlay doesn't have a transparent gradient, but is solid red/green instead. Probably not related, though.
Oh no, that's not good! I'm on it!
Probably related to the switch to SVG. :\
I can't reproduce the problem, maybe it's a caching issue?
Can you post a screenshot? On which version of iOS is this happening?
Tried a different browser, but got the same result. Here's a screenshot:
iOS version is 11.4.1
Is this with the latest version of both FilePond and the Image Preview plugin? If so, can you set up a public test case, I've tried reproducing it on Firefox, Chrome, Safari 11, iOS 12 and iOS 11 but I don't get this error.
% grep filepond package.json
"filepond-plugin-file-validate-type": "^1.1.0",
"filepond-plugin-image-exif-orientation": "^1.0.2",
"filepond-plugin-image-preview": "^2.0.1",
"ngx-filepond": "^3.0.0",Is there any way to include the plugins and ngx-filepond from a CDN? I'd like to set up a codepen.
I tried to get ngx-filepond to work on codepen, but failed.
Last error message is: "Uncaught TypeError: Cannot read property 'core' of undefined"
https://codepen.io/rikschennink/pen/vRvZPK
See settings for the CDN.
I can't imagine this is related to Angular but maybe it is, I would find that very odd, maybe set up a native JS pen?
Ok, your codepen works for iOS. I've uploaded my angular app to my server (just the frontend, there's no backend):
Click on use camera.. overlay works in chrome + firefox, but not in safari. Strange..
Thanks a lot for your support and sorry that I struggle to be helpful, but I'm not really a frontend developer :).
No problem, happy to assist! If this is a bug I want to catch it as quickly as possible ;-)
I tried to open the site but it wants me to enter login credentials.
Just select use camera from menu or /camera via url, I deactivated authentication..
Alright, this is super odd, I'm going top run some tests on my local dev environment.
It's either a style collision (but I can't really pinpoint what it would be) if it is, it shouldn't happen on my dev environment), or it's a problem with the SVG mask url() not being able to access the SVG containing the mask (it's added to the <body>) due to it maybe being in a web component?
It renders correctly on a plain Angular project (without Material Design components), so it seems to be a style collision.
I'm not sure why its happening.
For now, you could try this to disable the gradients:
.filepond svg rect {
display:none;
}And then render a CSS gradient instead.
.filepond svg {
background: linear-gradient(rgba(0,0,0,.5), transparent);
}You could wrap these in a CSS selector that targets Safari only.
@supports (-webkit-marquee-repetition: infinite) and (object-fit: fill) {
/* selectors here */
}Yes, thanks a lot :). This finally worked:
@supports (-webkit-marquee-repetition: infinite) and (object-fit: fill) {
.filepond--image-preview-overlay svg rect {
display: none;
}
.filepond--image-preview-overlay svg {
background: linear-gradient(currentColor, transparent);
}
}But I had to append this to the global styles.css. Component local css didn't work, weird.
I think local CSS does something to the class names so maybe it mixes it up somehow?
Seems to be a scope issue, yup.