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: Canvas workspace disappears/goes grey when zooming in #651

Closed
lokothodida opened this issue Mar 21, 2017 · 32 comments
Closed

Bug: Canvas workspace disappears/goes grey when zooming in #651

lokothodida opened this issue Mar 21, 2017 · 32 comments
Assignees
Labels

Comments

@lokothodida
Copy link

Bug description

When zooming into the canvas, if the zooming obscures the horizontal and vertical boundaries of the image, then the visible canvas turns grey. The layers and preview window(s) are unaffected: it's just what is visible in the active workspace that vanishes. I can draw on the layers and the results will show up in the preview, but I can't see anything in the workspace. It basically means being unable to zoom adequately on medium->large sized sprites. However, I've only seen this problem on the Google Chromebook Pixel 2015. Other devices (e.g. Chromebooks like the Toshiba Chromebook 2014) seem to work fine.

I've not looked into the repository's source code, but when inspecting the page and checking the elements, it seems to be related to the <canvas> with the class name canvas-overlay. When I hide it, the workspace becomes visible, but the background becomes grey as well (screenshots included at the bottom).

Steps to reproduce the bug

  1. Go to piskelapp.com
  2. Open a piskel sprite
  3. Zoom into the work area beyond both the horizontal and vertical boundaries

Environment details

  • operating system: Chrome OS
  • browser: Google Chrome Version 57
  • device: Google Chromebook Pixel 2015

Screenshots

Before zooming

screenshot 2017-03-21 at 21 53 04

After zooming

screenshot 2017-03-21 at 21 53 46

Opening the inspector

screenshot 2017-03-21 at 22 11 19

Hiding the overlay canvas

screenshot 2017-03-21 at 22 11 34

@juliandescottes
Copy link
Collaborator

Thanks for opening the issue and adding so much details!

I know that canvas elements can fail to render if they are too big (hardware dependent, graphic card and pixel density mostly). I can't understand why the overlay (and most likely layer preview?) would fail to render, but the main canvas would still be ok.

You mentioned this only happened with medium/bug sprites? Can you elaborate a bit on that?

@lokothodida
Copy link
Author

@juliandescottes Thanks for replying.

By "small" sprites, I mean sprites that can feasibly be worked on when the image's horizontal and vertical boundaries fit the edges of the workspace when zoomed in (e.g. 32x32). By "medium->large", I mean sprites where you would want to zoom in further than that.

@juliandescottes
Copy link
Collaborator

Ok!

That means the bug still happens if you zoom on small sprites (for instance 32x32), it's just that you don't feel compelled to do it.

@lokothodida
Copy link
Author

Exactly :)

@lokothodida
Copy link
Author

Have you pushed any changes to the production server? Because I am no longer seeing the problem on the Pixel. Either that, or the update from Chrome version 57 to 58 fixed it.

@juliandescottes
Copy link
Collaborator

I haven't :/

As you said, Chrome 58 probably fixed it for you (which is great because I couldn't reproduce the issue). The joys of the web platform?!

@720Ultrasmasher
Copy link

lokothodida
How did you open the inspector with a chrome book?

@lokothodida
Copy link
Author

lokothodida commented Apr 5, 2017

@720Ultrasmasher: Ctrl+Shift+I (or right-click and Inspect from the context menu).

@720Ultrasmasher
Copy link

Ok thanks

@juliandescottes
Copy link
Collaborator

juliandescottes commented Apr 23, 2017

@TheNetherrackAxe @Mruble Chrome 58 has been released.

Can you check if the issue is fixed for you after updating Chrome?

@720Ultrasmasher
Copy link

720Ultrasmasher commented Apr 24, 2017 via email

@juliandescottes
Copy link
Collaborator

:(

OK thanks for the update, looks like I'm going to have to find a chromebook ...

@720Ultrasmasher
Copy link

720Ultrasmasher commented Apr 24, 2017 via email

This was referenced May 2, 2017
@switchgeer
Copy link

switchgeer commented May 4, 2017

Yeah, still happening on my school chrome too... (sorry for delay)

@lokothodida
Copy link
Author

lokothodida commented May 4, 2017

For people that are having issues in Chrome OS, it would be useful to know:

  • Your Chromebook model (e.g. ASUS Chromebook C201)
  • The channel* for your device (Stable, Beta, Dev)
  • The Chrome version* (e.g. 57)
  • Whether your device is school-restricted

* can be found by going to Help -> About Chrome OS

This can help us narrow down on whether or not it is a browser-specific or device-specific update that fixes the problem.

For me, it is (currently):

  • Device: Google Chromebook Pixel 2015
  • Channel: Beta
  • Version: 58.0.3029.89
  • School-restricted: No

@juliandescottes
Copy link
Collaborator

Thanks @lokothodida ! Indeed that would be super useful. @grosbouddha tried to reproduce the issue today with an HP Chromebook with version 57, but couldn't trigger the bug.

@lokothodida last time you said the issue was gone for you. Is it still the case or did it come back?

In the meantime I think I'll try some random fixes and will put various versions up for testing on github.

@lokothodida
Copy link
Author

@juliandescottes Thanks for still looking into the bug!

The issue hasn't come back for me (thankfully).

@juliandescottes
Copy link
Collaborator

Some investigation first.

The gray color from @lokothodida 's screenshots is #A0A0A0 . This color is only used in one spot in the application : to display the zoomed out area.

The two main canvas used in the application are the drawing canvas, which contains the current frame+layer, and the overlay canvas, which displays anything temporary (cursor, selection, shapes ...).

They are rendered exactly in the same way:
1 - fill the canvas with #A0A0A0
2 - translate the canvas context to center it on the origin of the drawing
4 - scale the canvas context (to compensate the ratio between the canvas size and the actual sprite size)
5 - clear the area corresponding to the sprite size
6 - draw the sprite
7 - revert the scale
8 - clear lines horizontally and vertically to render the "grid if needed"

From the various screenshots and reports I've seen, it seems like step 5 is not working as expected. It should cut a "hole" in the gray area to make sure the drawing zone is visible, but obviously ... it doesn't.
The other interesting thing is that the issue seems to start when there is actually no need to draw any zoomed out color.

To say it differently, the issue occurs when the clear from step 5 needs to clear the whole canvas. I already had issues with Chrome when using fillRect, clearRect with the maximum height and width ( if anybody's curious : https://bugs.chromium.org/p/chromium/issues/detail?id=469906 ).

I'm going to guess it's a similar issue and clearRect at full height + width is buggy?

@juliandescottes
Copy link
Collaborator

juliandescottes commented May 4, 2017

Now for the more interesting stuff, here are 5 test versions:

If anyone facing this bug could try out the links above and see if any of them fixes the problem that would be great.

cc @720Ultrasmasher @TheNetherrackAxe @Mruble @deraj-nagar @Elven-Lord

(edit: added a 4th test version)
(edit 2: added a 5th test version)

@720Ultrasmasher
Copy link

720Ultrasmasher commented May 5, 2017 via email

@juliandescottes
Copy link
Collaborator

@720Ultrasmasher thanks for the feedback. Don't you have access to what lokothodida suggested?

can be found by going to Help -> About Chrome OS

@720Ultrasmasher
Copy link

720Ultrasmasher commented May 5, 2017 via email

@juliandescottes
Copy link
Collaborator

I don't believe it is in the developer tools. @lokothodida mentioned clicking "Help -> About Chrome OS". I guess it should be in some kind of general menu in chrome os?

@720Ultrasmasher
Copy link

720Ultrasmasher commented May 5, 2017 via email

@juliandescottes
Copy link
Collaborator

@720Ultrasmasher if you're still around, can you try this other version:

http://juliandescottes.github.io/piskel/clear_capped_v2/

@720Ultrasmasher
Copy link

720Ultrasmasher commented May 5, 2017 via email

@juliandescottes
Copy link
Collaborator

Oh great, finally some progress :)
This version might not be ideal for actually using the editor, since the borders will hide a bit the edge of your drawing, but I just need to refine that now. Thanks for the quick feedback!

@720Ultrasmasher
Copy link

720Ultrasmasher commented May 5, 2017 via email

@juliandescottes juliandescottes self-assigned this May 5, 2017
@juliandescottes
Copy link
Collaborator

juliandescottes commented May 6, 2017

Here is an attempt at a proper fix:

http://juliandescottes.github.io/piskel/fix_v1/

Can someone validate that it works for them ?
cc @720Ultrasmasher @TheNetherrackAxe @Mruble @deraj-nagar @Elven-Lord

(edit: just got a positive feedback on this version from someone on twitter. additional testing still appreciated :) )

@juliandescottes
Copy link
Collaborator

(I will just leave open until I get some more feedback!)

@720Ultrasmasher
Copy link

720Ultrasmasher commented May 6, 2017 via email

@juliandescottes
Copy link
Collaborator

Thanks for the feedback!
Release v0.10.1 will contain this fix and a few other things. Will finish testing and releasing tomorrow.

Closing now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants