       attributes: true
       subtree: true
     observer.observe(target, options)
+  componentDidUpdate: ->
+    setTimeout =>
+      @alertWidth = document.getElementById('alert-container').offsetWidth
+    , 350
+    if @needUpdate then @handleAlertChanged()
+    @needUpdate = false
   componentWillUnmount: ->
     window.removeEventListener 'poi.alert', @handleAlert
     window.removeEventListener 'alert.change', @alertWidthChange

      else
        @stickyEnd = null
      @message = e.detail.message
      @messageType = e.detail.type
      @updateAlert()

  componentDidMount: ->
    window.addEventListener 'poi.alert', @handleAlert
    window.addEventListener 'alert.change', @alertWidthChange
    @message = @state.message
    observer = new MutationObserver(@handleAlertChanged)
    target = document.getElementById('alert-area')
    options =

    overflow: false
    messagewidth: 0

  updateAlert: (e, overflow, alertChanged) ->
    displayMessage = @message
    @setState
      message: displayMessage
      overflowAnim: if overflow then 'overflow-anim' else ''
    if alertChanged then @handleAlertChanged()

  alertWidthChange: (e) ->
    @alertWidth = e.detail.alertWidth
    if @state.overflowAnim isnt ''
      @message = @messageOld
    @needUpdate = true
    @updateAlert(null, @state.overflowAnim)

  handleMessageScroll: (overflow) ->
    overflowed = @state.overflowAnim isnt ''
    return if overflow is overflowed && !@needUpdate
    if overflow
      if React.isValidElement @message
        @message = <span>{@message}<span>　　　　　</span>{@message}<span>　　　　　</span></span>
      else
