     setTimeout (=> @refs.detailsTooltip?.forceUpdate()), 100
 
   render: ->
-    scale = @getScale()
+    scale = @state.scale
 
     <div className="subject-area">
       <SubjectViewer subject={@props.subject} frame={@state.frame} onLoad={@handleSubjectFrameLoad} onFrameChange={@handleFrameChange}>

  getInitialState: ->
    naturalWidth: 0
    naturalHeight: 0
    showWarning: false
    frame: 0
    selectedMark: null
    detailsTooltipOffset: ''

  getScale: ->
    ALMOST_ZERO = 0.01 # Prevent divide-by-zero errors when there is no image.
    rect = @refs.sizeRect?.getDOMNode().getBoundingClientRect()
    horizontal = (rect?.width || ALMOST_ZERO) / (@state.naturalWidth || ALMOST_ZERO)
    vertical = (rect?.height || ALMOST_ZERO) / (@state.naturalHeight || ALMOST_ZERO)
    {horizontal, vertical}

  getEventOffset: (e) ->
    rect = @refs.sizeRect.getDOMNode().getBoundingClientRect()
    scale = @getScale()
    x = (e.pageX - pageXOffset - rect.left) / scale.horizontal
    y = (e.pageY - pageYOffset - rect.top) / scale.vertical
    {x, y}

  handleSubjectFrameLoad: (e) ->
    if e.target.tagName.toUpperCase() is 'IMG'
      {naturalWidth, naturalHeight} = e.target
      if @state.naturalWidth is naturalWidth and @state.naturalHeight is naturalHeight
        @handleResize()
      else
        @setState {naturalWidth, naturalHeight}, @handleResize
      @props.onLoad? arguments...

  handleFrameChange: (frame) ->
