[Safari] Splash screen increases in scale slightly after loading has begun

[phet-steele]

Blink and you'll miss it (actually the looping gif makes it very obvious, but it is very subtle otherwise):

This is present on both mobile and desktop Safari. It happens every time I load the sim on macOS 10.12.3, but only happens once on the initial load for iOS 10.2 Safari. To make it happen again on mobile Safari, I can switch to and from another open tab, then reload the sim.

Tested with this link http://www.colorado.edu/physics/phet/dev/html/energy-skate-park-basics/1.3.1-dev.3/energy-skate-park-basics_en.html

[samreid]

I recommend to fix this not because it is a jarring visual issue but because it could indicate problems with how CSS is being dealt with in Joist, and could lead to problems in future browser versions (not just safari).

[samreid]

This is very subtle on my MBP, but I can see it.

[samreid]

To get to the same version of the code, I used dependencies.json and grunt --lint=false. I tried commenting out several CSS parts in joist, but the problem persists.

[samreid]

The problem is that the image changes size. On the first call, it is 273px wide then after load it is 274px wide.

Adding this code works around the problem:

  var splashImageWidth = 0;
  var splashImageHeight = 0;

  /**
   * Scale and position the given div, using the dimensions of the image for sizing.
   * @param {Element} div - the div to position
   * @param {HTMLImageElement} splashImg - the image to use for determining scale factor.  Not as exact as using the full
   *                                     - container div, but that dimension is not available on startup.
   */
  function positionDiv( div, splashImg ) {
    if ( splashImageWidth === 0 && splashImageHeight === 0 ) {
      splashImageWidth = splashImg.width;
      splashImageHeight = splashImg.height;
    }
    var currentWidth = splashImageWidth;
    var currentHeight = splashImageHeight;

[samreid]

Still seeing the problem in latest safari and merged with master.

[samreid]

I committed the workaround above and it still seems good for safari.

[samreid]

Dev version is here: http://www.colorado.edu/physics/phet/dev/html/energy-skate-park-basics/1.3.1-dev.5/energy-skate-park-basics_en.html

[samreid]

@jonathanolson suggested to check the naturalwidth

[samreid]

naturalWidth had the same problem as width, but @jonathanolson suggested to round out the image size by expanding the artboard then svg, and that seemed to fix the problem. Didn't fix IE though.

[samreid]

Fixed in the preceding commits, on hold until we work out IE in #408

[samreid]

This is out for testing in the aforementioned issue.

[phet-steele]

I no longer see this on macOS 10.12.6, iOS 10.3 beta, or iOS 9.3.5.