Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Borders is not responsive anymore #244

Closed
guastallaigor opened this issue Jan 4, 2019 · 11 comments · Fixed by #271
Closed

Bug: Borders is not responsive anymore #244

guastallaigor opened this issue Jan 4, 2019 · 11 comments · Fixed by #271
Assignees
Labels
bug Something isn't working released

Comments

@guastallaigor
Copy link
Member

Describe the bug
The borders has a few bugs in some resolutions. It's hard to explain but is easy to show, see Screenshots below:

To Reproduce

  1. Go to the develop branch;
  2. Change the line 17 of the index.html file to <link href="./css/nes.min.css" rel="stylesheet" />;
  3. Run npm run build;
  4. You can use something like php -S localhost:4167;
  5. Check localhost:4167;
  6. Zoom in and out and see that this bug happens.

Expected behavior
Nothing happened with the borders by changing the resolution/zoom.

Screenshots
image

image

image

image

image

image

Environment:

  • OS: Ubuntu 16.04 / Ubuntu 18.10 (test it on both)
  • Browser: Google Chrome Version 71.0.3578.98 64 bits
  • Build environment (i.e. NodeJS): v10.15.0

Suggestion(s) for fixing this issue
I've no ideia how to fix it. Only solution I see is reverting the borders back for now before the next release.

Additional context
In master this is not happening.

@guastallaigor guastallaigor added the bug Something isn't working label Jan 4, 2019
This was referenced Jan 18, 2019
@BcRikko
Copy link
Member

BcRikko commented Jan 23, 2019

Maybe this is related to #72 .
What is set for -webkit-font-smoothing: antialiased;? 🤔

@BcRikko
Copy link
Member

BcRikko commented Jan 31, 2019

I fixed border bugs #261
Did you reproduce the bug yet? 🤔

@guastallaigor
Copy link
Member Author

This is happening only when I zoom in and out in develop:

Example when I zoom in (150%)

image

Example when I zoom out (75%)

image

Chrome: Version 72.0.3626.81 64 bits

Note: This isn't happening in Firefox.

@BcRikko
Copy link
Member

BcRikko commented Feb 2, 2019

Thanks 🙇
It's reproduce when zooming in Chrome. I got it 👍
I'll check and fix again 🔧

@BcRikko BcRikko added the help wanted Extra attention is needed label Feb 5, 2019
@BcRikko
Copy link
Member

BcRikko commented Feb 5, 2019

When I set space to image-border-repeat, it was a little better. 🤔
But it is not perfect. 😭

Chrome 72 / zoom 150%

2019-02-05 20 37 34
2019-02-05 20 37 43

@guastallaigor
Copy link
Member Author

This is way better now than it was before. It is not breaking the layout or anything like that.

Yes, it's not perfect but good enough for me, because I'm not even sure if this could be better.
If you want to make a PR with this I'm ok with that 👍

@BcRikko
Copy link
Member

BcRikko commented Feb 5, 2019

I see 😆
I'll make a PR. 🚀

@BcRikko BcRikko self-assigned this Feb 5, 2019
@BcRikko BcRikko removed the help wanted Extra attention is needed label Feb 5, 2019
BcRikko added a commit that referenced this issue Feb 5, 2019
border is broken when zooming in/out on chrome

fix #244
@BcRikko
Copy link
Member

BcRikko commented Feb 16, 2019

🎉 This issue has been resolved in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@xylophong
Copy link

xylophong commented Mar 4, 2019

I'm still having this issue on your demo website, the borders don't scale well to zooming in Chrome (I'm on Ubuntu 18.04)

Example at 150%:
screenshot from 2019-03-04 16-54-56

@guastallaigor
Copy link
Member Author

guastallaigor commented Mar 4, 2019

Yes, I'm sorry about this @deepPhong.
The idea is to fix this issue again in #319.
Ref #317.
If you want I can reopen this.

@xylophong
Copy link

Oh no I'm fine, I didn't see it was already planned for a fix and just wanted you guys to know. Cheers and keep up the good work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working released
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants