0

I have a background (svg) image that I initially will view zoomed in and then on an event the image will zoom out to fit in the page. This works well in Firefox but in Chrome the picture was cropped when zoomed in and thus when it is supposed to fit the page it has white space around it. I believe this is part of Chrome's optimizer described here: http://famo.us/guides/pitfalls

My question is then, can I disable this optimization for this specific image? Or is there any other solution?

Edit: No need to look at the Chrome optimizer, solved by using better method for zooming (from correct answer below).

vikeri
  • 642
  • 6
  • 16
  • Hard to know what solution you would need without seeing the code with the methods you are using to put the image in render and the transforms you are using. A jsBin or Fiddle would be nice also, to see how it fails. These are all good practice to show you are as vested in your question as you want us to be in our answer. – talves Jan 13 '15 at 22:05
  • Sorry about that, I'm glad you understood it anyway :) My problem was that I used `transform.Scale` instead of `transform.Proportions` which, when zooming in again made the image blurry in Chrome. My initial way to resolve it was then to make the original image the zoomed in size but then the clipping occurred. Was actually looking at `proportions` but the mediocre description in the documentation prevented me from understanding it. – vikeri Jan 14 '15 at 11:51
  • I had the same issue with `transform.scale`. It is a problem in the Chrome browser. – talves Jan 15 '15 at 02:38

1 Answers1

1

Athough we do not know your use case, here is an example using proportions.

Example jsBin (click on the image to resize)

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);

  var mod = new StateModifier();

  var logo = new ImageSurface({
    content:  'http://code.famo.us/assets/famous_logo.svg',
    classes: ['double-sided']
  });
  logo._mod = new Modifier({
    size: [undefined, undefined],
    origin: [0.5, 0.5],
    align: [0.5, 0.5],
    transform: Transform.translate(0, 0, 0),
    proportions: [1.5, 1.5]
  });

  var mainMod = new Modifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
  });
  var rootnode = mainContext.add(mainMod);
  rootnode.add(logo._mod).add(logo);

  //logo._mod.setProportions([1.5, 1.5], {duration: 2000});

  logo.on('click', function(){
    if (!logo.small)
      logo._mod.setProportions([1,1], {duration: 1000});
    else
      logo._mod.setProportions([1.5, 1.5], {duration: 1000});

    logo.small = !logo.small;

  });
talves
  • 13,993
  • 5
  • 40
  • 63