相关疑难解决方法(0)

每隔一段时间,Chrome都会错误地呈现完全有效的HTML/CSS或根本不呈现.通过DOM检查器深入挖掘通常足以让它实现其方式的错误并正确地重绘,因此可以证明标记是好的.这种情况在我正在进行的项目中经常(并且可预测地)发生,因为我已经将代码放在适当位置以在某些情况下强制重绘.

这适用于大多数浏览器/操作系统组合:

    el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
    el.offsetHeight
    el.style.cssText += ';-webkit-transform:none'

如在,调整一些未使用的CSS属性,然后询问一些强制重绘的信息,然后取消对该属性的破坏.不幸的是,Chrome for Mac背后的聪明团队似乎找到了一种方法来获得offsetHeight而无需重绘.从而杀死了一个有用的黑客.

到目前为止,我想出的最好的方法是在Chrome/Mac上获得同样的效果:

    $(el).css("border", "solid 1px transparent");
    setTimeout(function()
    {
        $(el).css("border", "solid 0px transparent");
    }, 1000);

实际上,强制元素跳跃一点,然后冷却一秒钟然后再跳回来.更糟糕的是,如果你将超时时间降低到500毫秒以下(不太明显),它通常不会产生预期的效果,因为浏览器在返回其原始状态之前不会重新绘制.

有人愿意提供适用于Chrome/Mac的重绘/刷新黑客(最好是基于上面的第一个例子)的更好版本吗？

我试图弄清楚如何有一个可滚动的div只在Hovered时显示它的滚动条.

示例是Google图片搜索,在下图中,您可以看到左侧边栏在您将鼠标悬停在其上之后似乎无法滚动.

这可能是CSS还是需要Javascript？如果可能,可以快速举例说明如何完成这样的任务？

我在chrome中遇到了一个奇怪的重绘问题:

看到破碎的右侧？这是一个div单一的背景img.

HTML

<div id="resultsSortFilter>
  <!-- ... -->
</div>

CSS

#resultsSortFilter {
    float: left;
    width: 712px;
    height: 109px;
    margin: 7px 0 0 8px;
    background: url('../images/search_sortfilter_bg.png') no-repeat;
}

• 在任何其他浏览器中没有问题
• 仅发生在较新版本上,我们阻止了更新以防止这在内部导致问题.
• 似乎是在渲染完成之前通过向上和向下滚动触发的.
• 多个站点上的相同问题

有没有人见过这个？有谁知道是什么导致它或Chrome打算做什么？

Chrome版本 26.0.1410.64 m

更新

问题出在Windows和Mac OS上.事实上在Mac上似乎更糟糕.

我可能会把它进一步固定下来.我们在包含大量大图像的页面上收到错误.我想知道是否与Chrome必须下载的数据大小有关？

这似乎使问题消失(不会称之为修复):

"可能是较新版本的Chrome根本不喜欢你的GPU.我遇到了与你类似的问题,并通过关闭合成和3D加速功能解决了这些问题.

在地址栏中键入chrome:// flags并设置以下项:

• 所有页面上的GPU合成:已禁用(下拉列表中有三个选项.)
• 禁用加速的2D画布:启用(单击"启用"链接,该框将变为白色.)
• 禁用加速CSS动画:启用(如上所述,该项目将变为白色.)
• 然后单击页面底部显示的按钮立即重新启动以重新启动chrome并测试是否有效."

来自https://askubuntu.com/questions/167140/google-chrome-with-strange-behavior

更新

这个问题似乎在Chrome的更高版本中消失了.

我目前正在研究响应式设计网站原型.到目前为止一切都那么好,但对于一个非常奇怪的事情,我似乎只能在Chrome中重现.在扩展窗口时,有时浏览器似乎陷入状态之间,显示重复的元素和两个滚动条 - 也就是说,直到我点击浏览器窗口之外的某个地方,然后一切都被重新绘制并且看起来很好.截图:

我已经尝试了大量的"技巧"来让chrome以编程方式"重新点击"界面,例如更改body元素的填充,修改scrollY位置,以及大约10个左右的其他人,但似乎什么也没做诀窍.有人对这个有经验么？有什么建议？

我有一个绝对定位的元素,我在jQuery的帮助下使用CSS属性'left'移动.

$("#element").css('left', '103px');

在Firefox中,这可以按预期工作.但是在Safari中,我可以在element.style下看到Web Inspector中出现的样式,但样式未更新.如果我禁用(并重新启用)任何匹配的CSS规则(即使那些没有直接应用于我的div),也会渲染使用jQuery的样式.

我在旧的PowerMac上使用jQuery 1.7.2运行Safari 5.0.6.

我有以下简单的设置:

document.getElementById('inner').addEventListener('click', ({ target }) => {
  target.classList.add('match');
});

#container {
  background: green;
  overflow: auto;
  width: 200px;
  height: 100px;
}

#inner {
  width: 210px;
  height: 110px;
}

#inner.match {
  width: 200px;
  height: 100px;
}

<div id="container">
  <div id="inner"></div>
</div>

单击内部元素后,我希望父项上的滚动条消失,因为这两个元素现在具有匹配的大小.这在Firefox中可以正常工作.
但是,容器元素不会丢失Chrome中的滚动条,如下面的屏幕截图所示:

滚动条本身会创建一个足以产生溢出的偏移量.
这是特定于webkit的问题吗？对于这个(看似微不足道的)问题,是否存在跨浏览器,可靠的解决方案？

我正在寻找一种不会改变父母属性的解决方案,因为我的内容(#inner)将被放置在我无法控制的DOM中.

到目前为止,我已经尝试在不同的执行点隐藏/显示和/或分离/重新插入元素,但问题仍然存在,可能是因为操作被简单地优化掉了.

问题出现在Jsfiddle和Stack片段中.

该错误已在Webkit Bugzilla上提交.

我有一个引导列,其中包含一个标题div,它是另一个引导行,位于React Web应用程序中.

容器有css:

height: calc(100vh - 14em);
overflow-y: hidden;
padding-left: 0;
padding-right: 0;
display: table;
border-left: thin solid #e6e6e6;

标题行有css:

border: thin solid #e6e6e6;
border-left: 2px solid #e0e0e0;
height: 6em;
margin-left: 0;
margin-right: 0;
display: table-caption;

这在除Safari 10.1之外的每个浏览器中都能很好地工作,当容器列中的其他元素被移动时(通过React状态),它会消失.它在Safari 9中工作,它只在我更新时停止工作.

我已经尝试一次删除一个css属性,并添加"position:relative"以及每个溢出选项,并且没有任何效果.我也试过查找类似的问题(元素只在Safari中消失),到目前为止,这些问题都没有.

但奇怪的是,如果我在浏览器中更改任何css属性,就像我删除"height:6em"然后将其放回去一样,div显示.如果我开始添加另一个css属性,该元素会在我完成输入之前显示.

我很确定这是Safari中的一个错误,因为它在9或任何其他浏览器中都不是问题...我怎么能让它强制更新,或者更好但不需要更新？

chrome中的flexbox似乎存在问题,它会影响可变高度的列.当这些列的内容发生更改时,列应调整大小,但不会

我在这里创建了一个JS小提琴 - http://jsfiddle.net/KVQTd/2/

只需点击"删除内容按钮"即可查看我的意思.

这是使用flexbox创建列的最简单示例,以演示没有其他任何原因导致它.

.wrapper{
    display: flex;
    align-items: stretch;
}

.column1{
    flex: 1;
}

.column2{
    flex: 1;
}

我很确定这是Chrome中的一个错误,因为当您进入开发人员工具并关闭并再次开启时,它会正确计算高度.

我在此处提交了错误报告 - https://code.google.com/p/chromium/issues/detail?id=369869&thanks=369869&ts=1399226675 -

...但我没有时间等待新版本的Chrome发布,所以我希望有人能够想到一个聪明的解决方案.也许是某种观察内部内容高度并调整强制重新计算弹性箱高度的javascript？

我正在使用jQuery滑块来调整包含段落文本的DIV的填充.当我平均增加所有边上的填充时,它应该强制将封闭的段落放在页面中心的一个更窄的列中.

这适用于Firefox,但在Chrome中,段落宽度保持不变(即它们不会随着DIV的填充推入它们而变窄),因此将布局推向右侧.

我在这里重新创建了这个问题:jsfiddle.net/ms3Jd.您可以在Chrome和Firefox中试用它来查看差异.

有关如何强制Chrome刷新所附段落的任何想法？

我希望顺利转换css属性然后我想立即更改css属性值然后我想再次附加转换.为了更好地理解,请参阅以下示例:

if ($(".marquee").height() < $(".marquee-content").outerHeight(true)) {
  $(".marquee-content").clone().appendTo($(".marquee-wrapper"));
}
$('.marquee-wrapper').css("transition", "transform 3s linear");
$('.marquee-wrapper').css("transform", "translateY(-" + $(".marquee-content").outerHeight(true) + "px)");

setInterval(function() {
  
  $('.marquee-wrapper').css("transition", "none");
  $('.marquee-wrapper').css("transform", "translateY(100px)"); //This should Immediately change translateY to 100px without smooth transition. But this doesn't happen without adding a delay before the below written line
  
  // Its weird why javascript engine executes the below line before executing this line

  $('.marquee-wrapper').css("transition", "transform 3s linear");
  $('.marquee-wrapper').css("transform", "translateY(-" + $(".marquee-content").outerHeight(true) + "px)");

}, 3000);

.marquee {
  margin: auto;
  width: 600px;
  height: …