fix(ui): different landing page visual

[floyd-li]

Thank you for your contribution to the KodaDot NFT gallery.

i found this issue, it's caused by the svg filter feGaussianBlur. it has different behavior in different browsers, here's the chrome/firefox/safari's screenshot and you can easily find the difference.
also provide a codepen for this, you can use different browser to check behavior: https://codepen.io/floyd-li/pen/abaYXGg

---

so the solution is, replace thesesvg imgs with png.

👇 _ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Closes Different landing page visual on firefox #4757
• Requires deployment <>

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality
• I've posted a screenshot of demonstrated change in this PR

Optional

• I've tested it at </bsx/collection>
• I've tested PR on mobile
• I've written unit tests 🧪
• I've found edge cases

Had issue bounty label?

• Fill up your KSM address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot 📸

• My fix has changed something on UI; a screenshot is best to understand changes for others.

[kodabot]

SUCCESS @floyd-li PR for issue #4757 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[netlify]

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	ce7ae1b
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/64145736b9ae2c0008fc33d4
😎 Deploy Preview	https://deploy-preview-5273--koda-nuxt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[exezbcz]

its looks much more transparent then before, not sure whether we want this tho. Is there any way to fix that?
after:

before:

tested in chrome

[floyd-li]

thanks for your feedback, seems the svg to png convert goes wrong. i'll update it soon.

its looks much more transparent then before, not sure whether we want this tho. Is there any way to fix that? after: before:

tested in chrome

[floyd-li]

@exezbcz just updat bg imgs, pls check it again :)

[roiLeo]

What if we keep svg and try to use css filter instead?

[exezbcz]

@roiLeo yeah, I was thinking the same but cannot find the issue - so basically use the raw shapes and then apply layer blur?

for example the right shape is this

• with layer blur 400px

its in the figma landing page handoff
https://www.figma.com/file/3iOjW12ERFRDSVnpLuhQmf/landing-page-handoff?node-id=3725%3A3848&t=Do6VL6QnCQMUVc15-1

[exezbcz]

@floyd-li yup, looks good now!

[roiLeo]

@roiLeo yeah, I was thinking the same but cannot find the issue - so basically use the raw shapes and then apply layer blur?

I think we already mention this in older issue.

IMO we need to rework exported svg from figma.
For example on Nuxt website, there is more or less the same thing in header.
They manage to export 3 different gradient size depending on screen size:

• desktop
• tablet
• mobile

[floyd-li]

@exezbcz @roiLeo I tried this before and seems not working well.
here's the codepen based on the svg, i just commented the feGaussianBlur and use css filter: blur(185px) instead, also displayed differently in firefox as the svg does.
seemsblur effect has different behaviors in different broswers? 🤔️
https://codepen.io/floyd-li/pen/abaYXGg

[exezbcz]

@floyd-li hmm, weird, so the blur filter rendering is based on browser as well

• so then is the png the only viable option?

[floyd-li]

@floyd-li hmm, weird, so the blur filter rendering is based on browser as well

• so then is the png the only viable option?

not sure but i think png or webp img is the low-coast solution currently

[floyd-li]

@floyd-li hmm, weird, so the blur filter rendering is based on browser as well

• so then is the png the only viable option?

not sure but i think png or webp img is the low-coast solution currently

as i tested, if the css blur or the svg stdDeviation value > 100, firefox will render significantly different with chrome

edit: it's a bug reported 4 years ago and seems not been resolved, here's the bugzillia link: id=1530810

[exezbcz]

@floyd-li so i think we can go with the png approach then

Thanks for trying tho!
I will let other devs decide. It works for me 👍

[daiagi]

wfm

[roiLeo]

Hmm.. not really convinced with this solution but let it roll 🎢

Next we might need to resize (& minimify) the png for better aspec ratio
(and use b-image or nuxt-image lazy loading)

[floyd-li]

Hmm.. not really convinced with this solution but let it roll 🎢

Next we might need to resize (& minimify) the png for better aspec ratio

(and use b-image or nuxt-image lazy loading)

yep i'll follow up this and try to find a better solution

[floyd-li]

@vikiival @exezbcz is this PR okay to merge?

[vikiival]

@vikiival @exezbcz is this PR okay to merge?

let's see what will mr. design will say

[codeclimate]

Code Climate has analyzed commit ce7ae1b and detected 0 issues on this pull request.

View more on Code Climate.

[exezbcz]

@vikiival yes, its oki mr. painter :D

[vikiival]

pay 20 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $20 @ 35.79 USD/KSM ~ 0.559 $KSM
🧗 EZiu1PjV2j2JHKxY6mHnFwwCRCoV27uHKQSkKXATSh1srJT
🔗 0x8c91fa48c68650115cf8e3573003b98d98876249e7e24e6e534aedd5bd6e8687

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues