[bug] view is weird in Safari Browser

Isaac-Lee commented 2 years ago

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

[x] '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 commented 2 years ago

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

Isaac-Lee commented 2 years ago

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

Isaac-Lee commented 2 years ago

Font Error?

I think the font issue is occurring because there is no font-family property. https://github.com/qkrdmstlr3/techstack-generator/blob/a18a88b99c25018443db66d75c0971dc8febad07/static/js-icon.svg?short_path=7349877#L56-L59 https://github.com/qkrdmstlr3/techstack-generator/blob/a18a88b99c25018443db66d75c0971dc8febad07/static/raspberrypi-icon.svg?short_path=af08f80#L58-L64 It makes to bring the default font family of each browser, witch is as follow.

스크린샷 2022-05-17 오후 12 03 14

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

Isaac-Lee commented 2 years ago

Overall View

The view issue is occurring from following errors. https://github.com/qkrdmstlr3/techstack-generator/blob/a18a88b99c25018443db66d75c0971dc8febad07/src/components/templates/select/style.ts#L27-L33

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 commented 2 years ago

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&amp;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)

qkrdmstlr3 / techstack-generator