Skip to content

colorbar draws outside the bounds #970

Description

@hellochar

Hey Plotly team,

Small bug - sometimes, depending on the layout's height/vertical margins, one of the colorbar's .cbfill will get drawn outside the outline (see http://codepen.io/hellochar/pen/JREjyv):
image

Looks like it's only off by 1 pixel:

image

It is a noticeable artifact that sometimes appears in our charts. Any ideas what's going on here? Happy to submit a PR as well if someone could help me understand the code at
https://github.com/plotly/plotly.js/blob/master/src/components/colorbar/draw.js#L348

Thanks,
Xiaohan

Activity

  1. etpinard commented on Sep 22, 2016

    @etpinard
    Contributor

    Thanks for the report.

  2. andi1984 commented on Jan 5, 2017

    @andi1984

    When yanchor: 'bottom' is used it is off by far more pixels also overlapping with mode bar. So this mode is pretty much not usable at the moment. It should simply set y=0 on this mode.

  3. alexcjohnson commented on Jul 24, 2017

    @alexcjohnson
    Collaborator

    @etpinard pointed out this issue when I mentioned a related one during #1906, so I might as well combine them and tackle them simultaneously:

    we're not doing crisp rendering of colorbars - particularly the outlines, but line levels should probably be crisp too

  4. alexcjohnson commented on Jul 24, 2017

    @alexcjohnson
    Collaborator

    Looks like the original issue is masked in v1.29.0 - I suspect the tweaks in #1854 result in the outline covering the out-of-place bar - but there's still a y="-1" bar sometimes so I suspect it could become visible in certain cases. Frankly the whole concept of constructing our colorbars from 256 overlapping bars (regardless of how many pixels tall the bar is) seems a bit silly, I'm going to try to replace it with a simple gradient fill.

  5. alexcjohnson commented on Jul 24, 2017

    @alexcjohnson
    Collaborator

    A somewhat urgent aspect of this: lines in the colorbar with the default width of 0.5 just started to disappear for me:
    screen shot 2017-07-24 at 1 37 14 pm

    This only seems to be happening in Chrome on mac on my non-retina second screen. (I can't reproduce this even in ostensibly the same version of chrome on browserstack...) The lines still appear on my retina screen, and in other browsers. And they reappear if I give the lines any tilt away from horizontal, a somewhat different alignment relative to the edge of a pixel, or a width > 0.5px (even 0.51px). Another overly eager optimization by chrome? Or perhaps it somehow came in with the latest Mac OS update that I installed this morning? I don't think chrome updated in the last few days, and I'm quit confident this looked fine at the end of last week for me.

  6. rreusser commented on Jul 24, 2017

    @rreusser
    Contributor

    @alexcjohnson This page: https://rreusser.github.io/plotly-mock-viewer/#contour_heatmap_coloring
    Shows this for me (albeit on a retina screen):

    screen shot 2017-07-24 at 11 56 53

    What do you see? Chrome doesn't appear to have just updated for me.

  7. alexcjohnson commented on Jul 24, 2017

    @alexcjohnson
    Collaborator

    screen shot 2017-07-24 at 3 16 26 pm
    @rreusser Yep, I see the missing lines there too.

  8. rreusser commented on Jul 24, 2017

    @rreusser
    Contributor

    Good to know. Just wanted to be 100% sure we were all looking at identically the same code. I have a non-retina screen back at home that I can check out tonight. Anyone else able to confirm?

  9. rreusser commented on Jul 24, 2017

    @rreusser
    Contributor

    Solves it, of course, but not a solution…

    screen shot 2017-07-24 at 12 19 46

  10. alexcjohnson commented on Jul 24, 2017

    @alexcjohnson
    Collaborator

    possibly - crispEdges is what I was going to do to fix the other part of this anyway - just worried that this will lead to other instances where the line gets completely deleted too - typically that's even easier to do crisp than non-crisp.

  11. alexcjohnson commented on Jul 25, 2017

    @alexcjohnson
    Collaborator

    My chrome just updated from v59 to v60 and these artifacts (along with a bunch of related antialiasing failures I've noticed) seem to have been fixed. So the y="-1" issue and crisp rendering change are still open but unless other people report these missing lines and other failures I think this is no longer urgent.

  12. etpinard commented on Aug 15, 2018

    @etpinard
    Contributor

    Accidently automatically close by #2891

    image

    Github isn't smart enough yet to know that would probably make it easier to finally close isn't equivalent to close.

  13. alexcjohnson commented on Aug 15, 2018

    @alexcjohnson
    Collaborator

    Hah, maybe I should take that as a sign and just do ^^

  14. alexcjohnson commented on Aug 16, 2018

    @alexcjohnson
    Collaborator

    @andi1984 I haven't been able to reproduce the yanchor: 'bottom' issue you mentioned. Maybe it was solved somewhere else, or maybe I just haven't found the other pieces required to exhibit it... if you still see this please open a new issue with a reproducible example.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugsomething broken

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions