Scratch JavaScript doesn't work when Scaling

Using JavaScript with Hype
1

I have a scratch script that reveals an image as you “scratch” over it. The project I’m working on is 100% scalable, and it works up to a point. When the screen gets to small then I can only scratch a portion of the image.

The colored portion is as far as it can go. If the screen is slightly larger, then I can color the full image. So the script works responsively, just not on small screens, like phones.

Screen Shot 2020-06-03 at 4.05.12 PM
Screen Shot 2020-06-03 at 4.05.12 PM2090×898 703 KB

This is the code:

var piece1 = hypeDocument.getElementById('outline_animal_Y'); 
var piece1lastPart = piece1.style.backgroundImage.split("/").pop();
var piece1lastPart = piece1lastPart.substring(0,piece1lastPart.length - 1);
var piece2 = hypeDocument.getElementById('top_animal_Y');
var piece2lastPart = piece2.style.backgroundImage.split("/").pop();
var piece2lastPart = piece2lastPart.substring(0,piece2lastPart.length - 1);
var TheContainer= hypeDocument.getElementById("Container_Y");
TheContainer.style.width=piece1.style.width;
TheContainer.style.height=piece1.style.height;

piece1lastPart = piece1lastPart.replace('"','');
piece2lastPart = piece2lastPart.replace('"','');
//MOVE ALONG//
			createScratchCard({
  'container':hypeDocument.getElementById("Container_Y"), 
  'background':"${resourcesFolderName}/"+ piece2lastPart,
  'foreground':"${resourcesFolderName}/"+piece1lastPart, 
   //STOP// 
  //amount to be rubbed out before it gets fully revealed
  'percent':80, 
  //finger thickness
  'thickness':55,
	"counter":"percent",
	"callback":"callback"
  
});
piece1.style.display = "none";
piece2.style.display = "none";

Any ideas on how to solve this? I could change the percentage before it’s fully revealed, have 50% instead of 80%, but I’d rather avoid that.
THANK YOU!

2

It probably depends on how it is being scaled, so it would be good to know that. The other item it probably depends on is the javascript code itself. Probably seeing the .hype document is best. Perhaps there’s a scale difference between the pieces and the container?

I would be curious what your piece1.style.width/piece1.style.height is and if those are incorrect. If you are using “zoom contents” scaling for a flexible layout or otherwise using a transform:scale() CSS command, then that will not be reflected in the width/height. Therefore if the container has a different scale amount it will not equate correctly. If Container_Y isn’t scaled at all and the pieces are, you could instead try something like Element.getBoundingClientRect() which will take into account scales.

3

What’s weird is that it does work when scaling, it just doesn’t at a very small sizes like phone.
I am using Zoom Contents to scale.

4

Hmm… there doesn’t seem to be a specific boundary box that you are hitting in the screenshot so it is pretty bizarre. I don’t think there’d be any way to know for sure unless looking at the code.