Website
Website copied to clipboard
files-community
Examples On Themes Page Is Not Matching up to other browsers.
Before you start...
- [x] Have you refreshed the page? You might be using an old version of the site.
What browsers are you seeing the problem on?
Firefox
Description
When going to the themes page, when you select certain themes, the images (examples) start to bug out and not match up. I've tried this on every other browser. Works fine. Firefox is the only one having the issue.
Steps To Reproduce
- Go to the website
- Scroll down to Themes part
- Select all themes to see which ones are affected.
Expected behavior
The theme examples should match up accordingly.
Relevant Assets
For this, we just need to remove the fill-opacity properties from the background of the SVGs, since apparently in Firefox, they become transparent.
@TheOnlyTails
So, if you check out TailwindCSS website on chrome, you will they are using blur (with background color and opacity) (backdrop-blur dark:bg-slate-900/75) on the header element.
It doesn't work on Firefox because web dev sucks😂, but we can fix it. So they are using background opacity + blur. Blur doesn't work on Firefox and what blur does is that it doesn't allow elements under that element to be visible. You can see the same here with code blocks. Rewrite bg opacity to 100%(1) and it will solve the problem.
It seems that with SVGs it's a little different. I searched for blur work in static\ui\exported\tabs-theme-6.svg and came across with <feGaussianBlur>. Remove the element and everything will be fine.
I recommend not to use blur at all, because it makes websites laggy. This old issue was about the website being laggy. That time I thought it was because of the scrollbar because of that video but now I know it's because of the blur styles. I was working on this simple movies project and I added blur to movie boxes on the home page and it made the website so freaking laggy and I had to remove it😐 (and they say the web is the feature!).
(I'm not going to open a PR since your guys already have the source of these SVG files and you may need to edit them in the feature.)
This keeps happening. Now I can reproduce the problem in firefox, chrome and edge.
