Bug(?) Interior image of a Symbol does not scale properly with Symbol

1

Hi to All!

Working with @Van on his project where he discovered what appears to be a bug.

Thought I’d run by the group for further testing to see what shows up.

Issue
An image placed inside a Symbol does not scale correctly when the Symbol is scaled. The issue is reproducible 100% of the time in my experiments in all major browsers (using either Hype “Preview” or HTML output).

Mac OS: 10.11.6 64-bit;
Hype: 3.6.3 (584) Professional Edition;
Safari: 10.1.1 (11603.2.5);
Firefox: 57.0.1 (64-bit);
Chrome: 62.0.3202.94 (Official Build) (64-bit);
Opera: 49.0.2725.39

Example Project: Symbol Scaling Issue.hype.zip (265.3 KB)


Description

A Symbol scaled to 10% at the start of the “Main Timeline” is then scaled to 100% over the course of 3 seconds. The image inside the symbol does not scale correctly to 100% (the image itself is not scaled and is 100% in size). It appears that this image at the Symbol’s 10% scale is simply scaled up using the 10% image as the basis for the scaling - not the image at 100%. The result is a blurry incorrect representation of the scaled image when the Symbol itself reaches 100% scaling.


Remedial Measures to Date

1) Unchecked the usual suspects for problems like this:
• “Use WebKit graphics acceleration”
• “Position with CSS left/top”

2) Matched the scaling of the image inside the Symbol to that of the Symbol.
3) Tried different images.
4) Tried different scaling percentages.

What does work - a Weird Fix
Placing a copy of the image inside the Symbol outside of the Symbol on the Timeline. You can then hide this exterior copy of the image using the “eye” icon on its Timeline layer (the original image is still inside the Symbol). The image inside the Symbol scales correctly at runtime. Hiding the image is not necessary for this to work - just less confusing to view.

Delete this exterior image and the scaling issue returns for the Symbol’s interior image. Note: You may have to close & re-open the Hype file once the exterior has been added and then removed - the correct scaling effect can linger (this does not appear to be cache related as I’ve disabled them).

Using other images or graphics in this scenario does not have this effect - the image inside the Symbol scales incorrectly (if no exterior copy of the image has been created).

Image placed outside the Symbol and hidden

2

Try setting the Flexible Layout settings by clicking on the arrowed lines inside the ‘Pins & Sizing’ box and then check the Zoom contents box

Edit: Actually, just clicking on the arrows corrects the issue, no need to click on the check box for Zoom contents.

3

Hi Greg!

Thank You for your response - but my intention here was more along the lines of a feature that should function by standard means (scaling via “Scaling” input fields) - and that this feature was non-performing. I wanted to see if any others had a different experience or insights using this scaling approach.

And, why does having an element functionally set to “display:none” (the external copy of the image) allow the scaling to work “properly” for the image inside the Symbol?

Resorting to a flexible layout to achieve this goal does not seem kosher.

1 Like