表单输入在bootstrap 3模态中不呈现chrome中的更改或内容

Question

我有一个rails应用程序，其中我在bootstrap 3模式中显示一些表单。在Chrome中（我在Firefox中看不到这个bug）当我输入其中一个文本字段或从选择列表中选择某些内容时，这些字段仍为空白。如果对页面进行了一些更改，例如调整大小或放大等，则会显示添加的值。

我无法确定问题。如果我删除bootstrap css，表单字段工作正常。我起初虽然问题是：焦点样式，但删除那些并没有解决问题。还有其他人看到这个问题吗？它只发生在模态形式中。以下是相关代码......

示例表单部分

<div id="modal-form" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-primary">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title"><span class="fa fa-file"></span> Attach file</h4>
      </div>
      <div class="modal-body">

        <div class="row">
          <div class="col-sm-offset-2 col-sm-8">
            <br>
            <fieldset>
              <%= render 'layouts/direct_upload_form' %>
              <p class="box-instructions">Maximum file size is 5GB.</p>
            </fieldset>
          </div>
        </div>

        <%= form_for([@attachable, @file_attachment], html:{class:'form-horizontal'}) do |f| %>

        <%= f.hidden_field :s3_key, :value => (params[:file_attachment][:s3_key] if params[:file_attachment].present?) %>

        <div class="form-group">
          <%= f.label :subject, class:'col-sm-2 control-label' %>
          <div class="col-sm-4">
            <%= select_tag :subject_select, options_for_select([[''], ['Agreement'], ['Background'], ['Deliverables'], ['Finished sample'], ['Image'], ['Script'], ['Special effects'], ['Other']]), class:'form-control' %>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-9 col-sm-offset-2">
            <%= f.text_field :subject, class:'form-control hide subject-field' %>
          </div>
        </div>
        <div class="form-group">
          <%= f.label :description, class:'col-sm-2 control-label' %>
          <div class="col-sm-9">
            <%= f.text_area :description, rows:4, class:'form-control' %>
          </div>
        </div>

        <div class="pull-right">
          <%= f.submit "Save", class:'btn btn-primary' %>
        </div>

        <div style="clear:both;"></div>
        <% end %>
      </div><!-- /.modal-body -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

修改

似乎这段代码导致了模态中输入字段的问题 -

var CanvasImage=function(e,t)
{
    this.image=t,
    this.element=e,
    this.element.width=this.image.width,
    this.element.height=this.image.height;
    var n=navigator.userAgent.toLowerCase().indexOf("chrome")>-1,
    r=navigator.appVersion.indexOf("Mac")>-1;
    n&&r&&(this.element.width=Math.min(this.element.width,1200),this.element.height=Math.min(this.element.height,2000)),
    this.context=this.element.getContext("2d"),
    this.context.drawImage(this.image,0,0)
};
CanvasImage.prototype={
    blur:function(e){
        this.context.globalAlpha=.5;
        for(var t=-e;t<=e;t+=2)
            for(var n=-e;n<=e;n+=2)
                this.context.drawImage(this.element,n,t),
            n>=0&&t>=0&&this.context.drawImage(this.element,-(n-1),-(t-1));
            this.context.globalAlpha=1
        }
},

CanvasImage.prototype={
    blur:function(e){
        this.context.globalAlpha=.5;
        for(var t=-e;t<=e;t+=2)
            for(var n=-e;n<=e;n+=2)
                this.context.drawImage(this.element,n,t),
            n>=0&&t>=0&&this.context.drawImage(this.element,-(n-1),-(t-1));
            this.context.globalAlpha=1
        }
},

$(function(){
    var image,canvasImage,canvas;
    $(".blur").each(function(){
        canvas=this,
        image=new Image,
        image.onload=function(){
            canvasImage=new CanvasImage(canvas,this),
            canvasImage.blur(4)
        },
        image.src=$(this).attr("src");
    });
});