fix: thin lines are rendered inconsistently by alexhx5 · Pull Request #4615 · vuetifyjs/vuetify

alexhx5 · 2018-07-14T14:36:42Z

Description

Currently all thin lines in Vuetify components look inconsistent and confusing (depends on the page zoom and element position on the page):

Some lines are rendered too thick
Some lines become invisible

The problem occurs because of approximation in rendering which becomes noticable for thin elements (e.g. v-divider, v-divider vertical, v-select, v-input-field)

There's currently only 1 solution to this problem - to use borders as lines.

It fixes the problem on all Chromium and Firefox browsers (and possibly on Safari, haven't tested).

How Has This Been Tested?

Visually:
Codepen example: https://codepen.io/anon/pen/yqYdbB?editors=1100

Open the link
Change the page zoom around (50% - 200%) to notice the problem with lines (some will dissapear, some will become thicker)
Un-comment CSS to see the fix in action

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

Checklist:

The PR title is no longer than 64 characters.
The PR is submitted to the correct branch (master for bug fixes, dev for new features and breaking changes).
My code follows the code style of this project.
My change requires a change to the documentation.
I have created a PR in the documentation with the necessary changes.

fix: thin lines are rendered inconsistently

KaelWD · 2018-07-14T14:44:15Z

src/stylus/components/_text-fields.styl

@@ -159,11 +159,15 @@ rtl(v-text-field-rtl, "v-text-field")
      background-position: bottom
      background-size: 3px 1px
      background-repeat: repeat-x


Anyone know what all this crap is for? Probably isn't needed any more if we're using borders now.

It's for disabled styles

Removed unnecessary `height` rules, increased border width to 2px for `box` input (I accidentally made it 1px initially)

codecov · 2018-07-14T16:19:56Z

Codecov Report

Merging #4615 into master will decrease coverage by 0.04%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #4615      +/-   ##
==========================================
- Coverage   90.17%   90.12%   -0.05%     
==========================================
  Files         206      206              
  Lines        4914     4923       +9     
  Branches     1246     1251       +5     
==========================================
+ Hits         4431     4437       +6     
- Misses        387      389       +2     
- Partials       96       97       +1

Impacted Files	Coverage Δ
src/components/VSnackbar/VSnackbar.js
src/components/VSnackbar/index.js
...mponents/VExpansionPanel/VExpansionPanelContent.js
src/components/VExpansionPanel/index.js
src/components/VExpansionPanel/VExpansionPanel.js
...mponents/VExpansionPanel/VExpansionPanelContent.ts	`85.29% <0%> (ø)`
src/components/VExpansionPanel/index.ts	`100% <0%> (ø)`
src/components/VSnackbar/index.ts	`100% <0%> (ø)`
src/components/VExpansionPanel/VExpansionPanel.ts	`93.33% <0%> (ø)`
src/components/VSnackbar/VSnackbar.ts	`95.23% <0%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 52f7357...23aef69. Read the comment docs.

Removed unnecessary styles: `height, min-height, width, min-width`. We don't really need them if we're drawing lines as borders

fixes #4641 see #4615

see #4615 still need to figure out something with background-image, but this'll do for now

fixes vuetifyjs#4641 see vuetifyjs#4615

see vuetifyjs#4615 still need to figure out something with background-image, but this'll do for now

fixes vuetifyjs#4641 see vuetifyjs#4615

see vuetifyjs#4615 still need to figure out something with background-image, but this'll do for now

fixes vuetifyjs#4641 see vuetifyjs#4615

see vuetifyjs#4615 still need to figure out something with background-image, but this'll do for now

fixes vuetifyjs#4641 see vuetifyjs#4615

see vuetifyjs#4615 still need to figure out something with background-image, but this'll do for now

see 2dec42a and #4615

see 2dec42a and vuetifyjs#4615

lock · 2019-04-15T04:20:53Z

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord

fix: thin lines are rendered inconsistently

86e57b3

fix: thin lines are rendered inconsistently

KaelWD reviewed Jul 14, 2018

View reviewed changes

Update _text-fields.styl

724edf4

Removed unnecessary `height` rules, increased border width to 2px for `box` input (I accidentally made it 1px initially)

Update _dividers.styl

23aef69

Removed unnecessary styles: `height, min-height, width, min-width`. We don't really need them if we're drawing lines as borders

johnleider merged commit 7cd89ea into vuetifyjs:master Jul 17, 2018

KaelWD added a commit that referenced this pull request Jul 18, 2018

fix(dividers): prevent from growing in the wrong direction

6754fc4

fixes #4641 see #4615

KaelWD added a commit that referenced this pull request Jul 18, 2018

fix(VTextField): show dashed underline when disabled

2dec42a

see #4615 still need to figure out something with background-image, but this'll do for now

YoanChapron pushed a commit to YoanChapron/vuetify that referenced this pull request Jul 18, 2018

fix(dividers): prevent from growing in the wrong direction

acf3de6

fixes vuetifyjs#4641 see vuetifyjs#4615

YoanChapron pushed a commit to YoanChapron/vuetify that referenced this pull request Jul 18, 2018

fix(VTextField): show dashed underline when disabled

29eef82

see vuetifyjs#4615 still need to figure out something with background-image, but this'll do for now

YoanChapron pushed a commit to YoanChapron/vuetify that referenced this pull request Jul 18, 2018

fix(dividers): prevent from growing in the wrong direction

505c33c

fixes vuetifyjs#4641 see vuetifyjs#4615

YoanChapron pushed a commit to YoanChapron/vuetify that referenced this pull request Jul 18, 2018

fix(VTextField): show dashed underline when disabled

3afd3e1

see vuetifyjs#4615 still need to figure out something with background-image, but this'll do for now

YoanChapron pushed a commit to YoanChapron/vuetify that referenced this pull request Jul 18, 2018

fix(dividers): prevent from growing in the wrong direction

2010fc6

fixes vuetifyjs#4641 see vuetifyjs#4615

YoanChapron pushed a commit to YoanChapron/vuetify that referenced this pull request Jul 18, 2018

fix(VTextField): show dashed underline when disabled

a99ebe1

see vuetifyjs#4615 still need to figure out something with background-image, but this'll do for now

YoanChapron pushed a commit to YoanChapron/vuetify that referenced this pull request Jul 18, 2018

fix(dividers): prevent from growing in the wrong direction

1a72eb5

fixes vuetifyjs#4641 see vuetifyjs#4615

YoanChapron pushed a commit to YoanChapron/vuetify that referenced this pull request Jul 18, 2018

fix(VTextField): show dashed underline when disabled

cbaffd1

see vuetifyjs#4615 still need to figure out something with background-image, but this'll do for now

KaelWD added a commit that referenced this pull request Jul 18, 2018

refactor(VTextField): use border-image instead of border-style

d95a80a

see 2dec42a and #4615

DoritoBandito pushed a commit to DoritoBandito/vuetify that referenced this pull request Jul 18, 2018

refactor(VTextField): use border-image instead of border-style

02a642e

see 2dec42a and vuetifyjs#4615

lock bot locked as resolved and limited conversation to collaborators Apr 15, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: thin lines are rendered inconsistently#4615

fix: thin lines are rendered inconsistently#4615
johnleider merged 3 commits intovuetifyjs:masterfrom
alexhx5:master

alexhx5 commented Jul 14, 2018

Uh oh!

KaelWD Jul 14, 2018

Uh oh!

johnleider Jul 17, 2018

Uh oh!

codecov bot commented Jul 14, 2018 •

edited

Loading

Uh oh!

lock bot commented Apr 15, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

alexhx5 commented Jul 14, 2018

Description

How Has This Been Tested?

Types of changes

Checklist:

Uh oh!

KaelWD Jul 14, 2018

Choose a reason for hiding this comment

Uh oh!

johnleider Jul 17, 2018

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Jul 14, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

lock bot commented Apr 15, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

codecov bot commented Jul 14, 2018 •

edited

Loading