[bug] view is weird in Safari Browser

[Isaac-Lee]

Description

Font Error?

• Different Font in Safari

The font in JS, TS icon is weird

And also font of `raspberry pi` icon as well

Overall View

• 'gap' property not working in Safari

And for the last the overall view is different from when I use Chrome.

The column is 5 whitch is 4 when I view with Chrome.

[qkrdmstlr3]

wow~~~ Thank you! Maybe I'll fix it after the first semester is over. I'm too busy😢

[Isaac-Lee]

Sure! Take your time.
I will find a way to fix this also.

[Isaac-Lee]

Font Error?

I think the font issue is occurring because there is no font-family property.

techstack-generator/static/js-icon.svg

Lines 56 to 59 in a18a88b

	.js-text {
	font-size: 30px;
	font-weight: bold;
	}

techstack-generator/static/raspberrypi-icon.svg

Lines 58 to 64 in a18a88b

	.pi-text{
	fill: #E66526;
	font-size: 13px;
	font-weight: bold;
	opacity: 0;
	animation: text-ani 5s infinite;
	}

It makes to bring the default font family of each browser, witch is as follow.

So adding the font-family property may solve the first problem.

[Isaac-Lee]

Overall View

The view issue is occurring from following errors.

techstack-generator/src/components/templates/select/style.ts

Lines 27 to 33 in a18a88b

	export const TechStackList = styled.ul`
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	gap: 36px;
	`;

The gap property is not working properly in Safari.
I test the code in Chrome with turning off the gap property and it looks the same.

I searched it out a bit and found that under Safari 14.1 the "flex gap" was not supported. My Safari version is 14.0.3 so.. the veiw was weird for me.

Still, it would be great for fix this bug in the future :)

[Isaac-Lee]

I am still working on this issue.
The gap property is not working fine after updating my Safari.

But still font issue is having some problems in Safari browser.

I found that the default font Chrome is using is 'Roboto'.
So I tried to import the font like below to use in every browser(including Safari).

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital@1&display=swap');
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), 
    url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
.js-text {
    font-size: 30px;
    font-family: 'Roboto';
    font-weight: bold;
}

Unfortunately, nothing changed...

I will keep working on this issue but I think it will take some time 🥲

plus: It is very interesting that the html text is using Roboto font, but SVG text does not. (super super weird)