必须删除并重新应用CSS属性才能使其工作.CSS的可能错误？

Question

更新:在阅读本文并说你需要更多代码来复制问题之前,我要问的一个简单问题是:

"你有没有必要删除并重新应用一个元素的CSS属性,以便当该属性已经在该元素上并且应该默认工作时应用该样式？如果是这样,你的解决方案是什么,或者你做了什么？知道最终导致问题的原因是什么？"

更新2:我不是100%肯定,但这可能只是font-size属性的问题,它使用Javascript动态更改.在Javascript中重新调整大小的外部和/或内部元素的CSS可以正常工作,这个问题似乎只发生在字体大小调整上.也许周围的HTML的CSS没有捕获font-size内存密集型样式更改(比如我们的resize函数).只是一个猜测.

---

这篇文章的其余部分是澄清我所谈论的内容的一种手段.

此问题可能是Chrome独有的问题.为了澄清,我们的应用程序由我们的销售团队在内部使用,该项目专门针对Chrome开发和现场使用.当在其他浏览器中打开它时,样式已经完全关闭,因为我们只需要创建我们的CSS以符合Chrome标准(我很幸运能找到这样的位置,我不知道,哈哈).

我在编码生涯中只遇到过这个问题几次,我认为这是CSS中的一个错误,但可能只是Javascript在DOM中进行样式更改和父容器CSS之间的一个罕见错误,因为它不能适应变化内存约束或Javascript将样式应用于HTML和CSS不更新以适应之间的延迟.我认为这是一个重要的问题,因为我认为每个前端Web开发人员在其职业生涯的某个阶段已经或将会遇到这个问题.

情况

为了使它尽可能短,我们在我们的体内有一个容器,我们使用Javascript来调整相对于窗口大小的16:9宽高比.取了整个窗口的截图.正如您所看到的,我们在浏览器窗口(黑色区域,即主体)内按比例调整内部容器大小.内部容器是我们的应用程序的所有内容显示的位置:

我们的CSS尽可能使用百分比构建.我们构建了一个'resizeUI'函数,它主要用于根据内部屏幕的当前宽度/高度比来改变字体大小,尽管该函数中还有其他元素也可以在窗口重新调整大小时重新调整大小.窗口总是完美地重新调整尺寸,并且基于内部窗口的宽度/高度像素比率需要特定尺寸的任何东西都按预期工作,子元素的基于百分比的CSS适当调整.但....

问题

通过单击并拖动(增量重新调整大小)来重新调整浏览器窗口大小时,页面上的所有内容都会完美地重新调整大小.但是,当窗口大小急剧变化,即时,全屏(最大化)变为小(恢复向下),反之亦然,顶部菜单中的字体大小将改变但是父级的CSS li将无法调整以适应新的font-size除非我取消检查(删除)它的padding属性并重新检查它(将其重新添加).当我这样做,它工作正常.该li容器真的只是有一个padding:1%,因此,正常调整是正确的基础上,内部跨度的大小与字体重新大小改变大小.

父级li应自动调整为内部span字体大小的更改.我对此持肯定态度,因为li当我在检查器中动态修改菜单的字体大小或文本长度时,父容器将自动重新调整大小.

这是在加载或增加窗口大小更改时通常看起来的样子:

以下是使用Maximize从小窗口大小到全屏幕时的样子:

我(hacky)修复

只有这样我才能使用它来移除<li>重新调整大小函数顶部元素的填充,然后在重新调整字体大小的行之后重新应用它的重新调整大小函数的底部.但是,这种情况占50%的时间.只有当在重新调整大小函数的底部放置100ms超时以重新应用填充时,我才能让它在100%的时间内正常工作.

为了提供帮助,这是我正在使用的一个非常基本的代码示例.该ul自动把它的尺寸是内部元素:

相关的HTML

<ul>
  <li class="menu-items><span>Item 1</span></li>
  <li class="menu-items><span>Item 2</span></li>
  <li class="menu-items><span>Item 3</span></li>
  <li class="menu-items><span>Item 4</span></li>
  <li class="menu-items><span>Item 5</span></li>
</ul>

相关的CSS

ul {
  position:absolute;
  top:0;
  right:2%;
  text-align:center;
}
.menu-items {
  padding: 1%;
}

相关的Javascript

什么有效约1/2的时间

function resizeUI(){
  $('.menu-items').css('padding','0');
  //Random other elements being re-sized
  $('.menu-items span').css('font-size', properRatio + "px");
  //More elements being resized
  $('.menu-items').css('padding','1%');
}

每次都有效

function resizeUI(){
  $('.menu-items').css('padding','0');
  //Random other elements being re-sized
  $('.menu-items span').css('font-size', properRatio + "px");
  //More elements being re-sized
  setTimeout(function(){  
    $('.menu-items').css('padding','1%');
  }, 100);
}

终极问题

有没有其他人在使用CSS时遇到类似问题,应该适应元素的重新调整大小？我觉得这是一个内存问题或Javascript和CSS之间的错误,因为必须设置超时是我让它在100%的时间内工作的唯一可靠方式,而且,这只会发生在一个巨大的,即时的变化上在窗口大小(最大化以恢复,或反之亦然),但不是手动,较小,增量调整大小.很抱歉这么冗长的帖子/问题,但我之前几次遇到这个奇怪的错误,因为必须删除并重新应用CSS属性才能让它正常工作,我毫不怀疑其他开发人员也有.

Answer 1

您是否曾经遇到过这样的问题：必须在元素上删除并重新应用 CSS 属性，以便在该样式已经存在并且默认情况下应该可以工作时应用该样式？

是的： https: //stackoverflow.com/a/34245989/1529630

你的解决方案是什么？

取消设置样式并立即重置它们不起作用，可能是因为浏览器尚未更新页面，然后它检测到我重置了所以最后它什么也没做。

超时时取消设置和重置是有效的，但会导致恼人的闪烁。

就我而言，解决方案是移除该元件并立即将其插回。

window.addEventListener('resize', function() {
  // Force a rerender
  var parent = element.parentNode,
      next = element.nextSibling;
  parent.removeChild(element);
  parent.insertBefore(element, next);
});

警告：这将强制浏览器进行布局、绘制和合成操作，这是昂贵的。