Closed cris770 closed 3 years ago
Thanks for reporting, the SVG is created on page load, and only once so it's ready immediately, it would probably work to listen for the location change and then update the url. Will look into this when I have some time.
can you test with 4.6.7
and let me know if this is fixed
I tested version 4.6.7 and the problem is still there😰.
I didn't delve into the source code, but the error behaves exactly the same.
Can you create a public test case?
Can you create a public test case?
Sure, but it'll take a while. I'll do it in my spare time😀
Can you create a public test case?
Sorry to have kept you waiting. I have created the test case, please access it here: http://123.57.162.123:6060/first
...
"dependencies": {
"@quasar/extras": "^1.0.0",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"filepond": "^4.28.2",
"filepond-plugin-image-exif-orientation": "^1.0.11",
"filepond-plugin-image-preview": "4.6.7",
"quasar": "^1.0.0",
"vue-filepond": "6.0.3"
}
...
(You can upload an image larger than 1MB to test the failed status)
Thanks for the detailed test case! Was able to reproduce : )
I just published 4.6.8, should fix it
Thank you for your work! I just tested version 4.6.8 and the problem has been fixed.
(Now I can upgrade from version 4.0.1🤣)
Fantastic, so glad to hear that : )
I'll close the issue.
Repo steps:
1.Create a react application with the base tag in the index.html
Expected behavior:
Actual behavior
on the initial page I see the overlay correctly displayed![image](https://user-images.githubusercontent.com/18436438/124102378-fd88ff80-da68-11eb-9a02-6821e54d2b43.png)
when I navigate to the other page, the overlay doesn't have any gradient on it![image](https://user-images.githubusercontent.com/18436438/124101204-c9f9a580-da67-11eb-941c-ae11d6cdc4ae.png)
I investigated the issue and found that it happens because the overlay is an svg which uses a (local) mask and fill through an url. The url is not correctly updated after navigating to a new route and on the second page.
First page (overlay correctly displayed):![image](https://user-images.githubusercontent.com/18436438/124103331-d979ee00-da69-11eb-88ee-95757228fe8f.png)
Second page overlay (broken overlay):![image](https://user-images.githubusercontent.com/18436438/124105124-928cf800-da6b-11eb-8283-dbbf5c183eef.png)
Should actually be:![image](https://user-images.githubusercontent.com/18436438/124105369-d4b63980-da6b-11eb-99c2-51eadc866a79.png)
By looking into the library's source code I noticed that if a base tag is present, it sets the urls for fill and mask to the window.location.href + id, which is ok. Also a flag called checkedMyBases is set to true so on page navigation the checkedMyBases is true so the url will not be updated, hence the overlay issue.
Code snippet from the library (where the issue lies) - createImageOverlay.js : ` create: ({ root, props }) => {
Could you please add a fix for this issue? Thanks!