blurry text

[pulsardev]

blurry text

[mmorainville]

Hi @Art3miX,

Unfortunately it looks more like an issue with your OS/browser than with the library so we can't really help you here. Like some people seems to point out in the Stack Overflow post you linked, it seems to be caused by the fact that the tooltip is positionned and has a width that made it hard/impossible for the browser to position it "pixel-perfectly".

You may want to try to tweak the width and position of the step (maybe first with the Chrome devtools just to see) so that the browser can make a subpixel rendering correctly.

I'll close this issue as this is probably not linked to the library but feel free to continue the discussion if it may help other people having the same issue.

[Art3miX]

@mmorainville Yes you are right, It is not issue with the library but the result is the library shows blurry text on Chrome.

After Some research, adding zoom:1.01 did help a bit but it wasn't working for all of the steps and each one of them needed a different zoom value, so i didn't found any fix for it.

I left the default colors for now as it is a lot better for me, but still, this issue is painful.

[smitpatelx]

Found the solution for this, the real issue is in the css that you are using. Working solution for this is to download css and use it in vue js directly. And then remove these lines:

  -webkit-filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));

and use this instead :

box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

If you don't want to go through all that hustle, then copy paste this scss

Don't forget to remove the old css import from your index.js or your plugin dir

body {
  &.v-tour--active {
    pointer-events: none;
  }
}
.v-tour {
  pointer-events: auto;
}
.v-tour__target--highlighted {
  -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  z-index: 9999;
}
.v-tour__target--relative {
  position: relative;
}
.v-step[data-v-7c9c03f0] {
  background: #535353;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 400;
  max-width: 320px;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  padding: 1rem;
  text-align: center;
  z-index: 10000;
}
.v-step {
  .v-step__arrow[data-v-7c9c03f0] {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 0.5rem;
    border-color: #535353;
  }
  .v-step__arrow--dark[data-v-7c9c03f0] {
    border-color: #454d5d;
  }
}
.v-step[x-placement^="top"][data-v-7c9c03f0] {
  margin-bottom: 0.5rem;
}
.v-step[x-placement^="top"] {
  .v-step__arrow[data-v-7c9c03f0] {
    border-width: 0.5rem 0.5rem 0 0.5rem;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: -0.5rem;
    left: calc(50% - 1rem);
    margin-top: 0;
    margin-bottom: 0;
  }
}
.v-step[x-placement^="bottom"][data-v-7c9c03f0] {
  margin-top: 0.5rem;
}
.v-step[x-placement^="bottom"] {
  .v-step__arrow[data-v-7c9c03f0] {
    border-width: 0 0.5rem 0.5rem 0.5rem;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    top: -0.5rem;
    left: calc(50% - 1rem);
    margin-top: 0;
    margin-bottom: 0;
  }
}
.v-step[x-placement^="right"][data-v-7c9c03f0] {
  margin-left: 0.5rem;
}
.v-step[x-placement^="right"] {
  .v-step__arrow[data-v-7c9c03f0] {
    border-width: 0.5rem 0.5rem 0.5rem 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: -0.5rem;
    top: calc(50% - 1rem);
    margin-left: 0;
    margin-right: 0;
  }
}
.v-step[x-placement^="left"][data-v-7c9c03f0] {
  margin-right: 0.5rem;
}
.v-step[x-placement^="left"] {
  .v-step__arrow[data-v-7c9c03f0] {
    border-width: 0.5rem 0 0.5rem 0.5rem;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    right: -0.5rem;
    top: calc(50% - 1rem);
    margin-left: 0;
    margin-right: 0;
  }
}
.v-step__header[data-v-7c9c03f0] {
  margin: -1rem -1rem 0.5rem;
  padding: 0.5rem;
  background-color: #454d5d;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.v-step__content[data-v-7c9c03f0] {
  margin: 0 0 1rem 0;
}
.v-step__button[data-v-7c9c03f0] {
  background: #ec8435;
  border-radius: 0.2rem;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  font-weight: 500;
  height: 1.8rem;
  line-height: 0.7rem;
  outline: none;
  margin: 0 0.2rem;
  padding: 0.55rem 0.6rem;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  vertical-align: middle;
  white-space: nowrap;
}
.v-step__button[data-v-7c9c03f0]:hover {
  background-color: #eb9b5e;
}

[mmorainville]

Hi @smitpatelx,

Thanks for finding the cause of this issue, it has been fixed in 1.6.x.