React MDBootstrap输入框聚焦时页面闪烁问题求助

我之前在做类似的React+MDB项目时也遇到过一模一样的问题，Chrome聚焦输入框时页面闪得头疼，结合你的代码来看，应该是布局样式触发了浏览器频繁的重绘重排，给你几个亲测有效的解决办法：

1. 重构登录表单的高度布局 #

你的login-form同时设置了min-height: 100%和min-height: 100vh，这种重复的视口高度设置会在输入框聚焦时（浏览器可能调整滚动或样式）触发高度重计算，导致闪烁。可以改成这样：

.login-form {
  height: 100vh;
  padding: 50px;
  /* 用flex布局垂直居中内容，替代依赖min-height的居中方式 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

2. 优化背景图片的渲染性能 #

左侧的login-image背景图在页面重排时可能被重新渲染，加上will-change属性告诉浏览器提前优化这个元素的渲染：

.login-image {
  background: url("../../resources/coming-soon2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* 告知浏览器该元素会有变换，提前分配资源 */
  will-change: transform;
}

3. 避免全局布局抖动 #

Chrome在输入框聚焦时可能会调整滚动条或者自动填充样式，导致body的布局变化。可以给body设置固定高度和隐藏溢出，避免这种全局抖动：

body {
  height: 100vh;
  overflow: hidden;
}

补充排查点 #

如果上面的方法没用，可以检查MDBootstrap的Input组件是否自带了聚焦时的全局样式（比如给body添加了类名或修改了padding/margin），可以通过Chrome开发者工具的Elements面板，在聚焦输入框时观察body或父元素的样式变化，针对性地覆盖这些样式。

内容的提问来源于stack exchange，提问作者Ankit Gupta