相关疑难解决方法(0)

任何人都可以解释为什么这些子弹会在Firefox和IE中正确改变颜色,但不能在Chrome中改变颜色(我目前的版本是47.0.2526.106)？为什么第一颗子弹会ul保持白色,但其他子弹最初会改变？

请注意,无论是绑定class还是使用ng-class属性,我都会遇到相同的行为.

有没有办法让颜色正确更新？

火狐/ IE:

铬:

angular.module('myApp', [])
  .controller('myCtrl', [
    '$scope',
    '$interval',
    function($scope, $interval) {
      var values = ['Hello', 'Oops', 'Uh-Oh...'];
      var classes = ['good', 'warning', 'danger'];
      var nItems = 8;
      $scope.items = [];

      for (var i = 0; i < nItems; i++) {
        $scope.items.push({});
      }

      function updateItems() {
        for (var i = 0; i < $scope.items.length; i++) {
          var item = $scope.items[i];
          var chosen = Math.floor(Math.random() * values.length);
          item.value = values[chosen];
          item.class = …

DOM阻塞是许多人不熟悉JavaScript严格的单线程同步执行模型的事情,但是它通常只是我们想以某种方式解决的问题(使用超时,网络工作者等).一切都很好.

但是,我想知道阻止实际的用户可见渲染是否可以实际依赖.我90%肯定在大多数浏览器中事实上都是如此,但我希望这不仅仅是一个快乐的一致事故.我似乎无法从DOM规范或MDM等供应商文档中找到任何明确的陈述.

令我担心的是,虽然看到页面的DOM更改确实不可见,但内部DOM几何(包括CSS转换和过滤器)在同步执行期间确实会更新.例如:

console.log(element.getBoundingRect().width);
element.classList.add("scale-and-rotate");
console.log(element.getBoundingRect().width);
element.classList.remove("scale-and-rotate");

......确实将报告两个不同的宽度值,虽然页面不会出现闪烁.在添加类(使用while循环)后同步等待也不会使临时更改可见.在Chrome中执行时间轴跟踪显示内部绘制和重新绘制正在发生相同,这是有道理的...

我担心的是,缺乏一个特定的原因,一些浏览器,比如那些处理动力不足的移动CPU的浏览器,可能会选择在该功能的执行过程中实际反映用户可见布局中的那些内部计算,从而导致丑陋在此类临时操作期间"闪现".所以,更具体地说,我要问的是:他们有特定的理由不这样做吗？

(如果你想知道为什么我会关心这一点,我有时需要使用getBoundingRect某个状态的元素来计算计算尺寸,以计划间距或动画或其他类似的东西,而不是实际将它们置于该状态或首先为它们设置动画. ..)

现在,我似乎能够使用px但不使用百分比在SVG内的组上应用translate和translate3d.我想知道是否可以使用%？我需要它们的原因是因为我想通过CSS动画几个SVG的内容.(使用像snap或svgjs这样的JS库给我带来了一大堆其他令人头疼的问题,例如Chrome中的扩展问题,所以我宁愿避免使用它们.)

我创建了一个小提琴来说明这种行为:http://jsfiddle.net/f4MU3/4/

CSS:

.cloud-svg .group {
    -webkit-transform:translate3d(50%,50%,0);
    -moz-transform:translate3d(50%,50%,0);
    transform:translate3d(50%,50%,0);
}

HTML:

<div class="container">
<div class="cloud">
    <svg class="cloud-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 107.4 50.6" enable-background="new 0 0 107.4 50.6" xml:space="preserve" preserveAspectRatio="xMinYMin meet" width="100%" height="100%">
        <svg x="0%" y="0%" viewBox="0 0 107.4 50.6">
            <g class="group">
                <path d="M74.6 20.6c3.4-5.3 8.5-7.2 14.1-7.9c4.3-0.6 8.7-0.3 12.8 1.7c1.9 0.9 3.2 2.2 3.8 4.1 c0.8 3.1 1.8 6.2 1.9 9.5c0.1 5.8-0.6 11.5 0.2 17.3c0.4 2.8-0.5 3.5-3.3 3.5c-5.2-0.1-10.3-0.5-15.5-0.8c-0.6 0-1.3-0.1-1.9-0.3 c-2-0.9-2.7 3.8-5.2 0.9c-1.7-1.9-4.3-1-6.5-1c-2.1 0.1-4.7 0.2-6.1-0.4c-6.5-3-12.8-0.4-19.1-0.4c-3.9 …

很抱歉这个问题有很多更新,我很高兴每个人都想帮助我.我认为下面有一个更清楚的方法来理解这个问题:

如果在更改附加了转换的属性之前将元素的display属性设置为阻止,则CSS转换将不适用.请考虑以下代码:

CSS:

#creative {
    display: none;
    opacity: 0;
    transition: opacity 0.5s; 
}

HTML:

<div id="creative">
    <span>Sample text</span>
</div>

使用Javascript:

var dom = {};
dom.creative = document.getElementById('creative');
dom.creative.style.display = 'block';
dom.creative.style.opacity = 1;

该元素将正确显示,但没有任何过渡.此问题的解决方法是通过访问元素的一个可视属性来强制重绘:

dom.creative.style.display = 'block';
var a = dom.creative.offsetHeight; /* <-- forces repaint */
dom.creative.style.opacity = 1;

这有什么好方法吗？好吧,我的意思是每次我需要更改显示属性和附加转换的属性时不添加额外的javascript代码行.

当发生onchange事件时,我使用.css更新select元素的宽度.在HTML中:

<select name="city_search" id="city_search" onchange='resetDropDown("#state_search");'>
<select name="state_search" id="state_search" onchange='resetDropDown("#city_search");'>

在JS中

function resetDropDown(elementObj)
{
    var selectBoxWidth = $(elementObj).attr('id') == 'college_search' ? 143 : 113;
    $(elementObj).css({width:selectBoxWidth});
}

出于某种原因,属性宽度已正确更改,但在检查元素或刷新页面之前,chrome不会显示更改.有没有办法强制chrome显示应用于元素样式的更改？

提前致谢.伊丽莎白

我最近正在开发一个svg地图应用程序.在ios7上一切正常.当我将我的项目移动到ios8时.奇怪的事情发生了,我发现当UIWebview读取嵌入了svg文件的本地html文件时,svg文件将不会显示在ios8上.

示例代码在这里:

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
NSString *path = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"html"];
NSURL *fileURL = [[NSURL alloc] initFileURLWithPath:path];
NSURLRequest *req = [NSURLRequest requestWithURL:fileURL];
[self.webView loadRequest:req];
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
@end

和使用的html文件:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>SVG DEMO</title>
</head>
<body>
<div>
    <embed src="410.svg" width="64" height="64" type="image/svg+xml" />
    <object type="image/svg+xml" data="410.svg" width="64" height="64" border="1"></object>
</div>
</body>
</html>

有谁知道发生了什么？

谢谢

我正在使用变换比例将图像大小调整为大于浏览器窗口的大小。这是移动浏览器的缩放功能。

transform: 'scale(3)' 

这个想法是您应该能够在手机上平移图像。但在 Chrome 中，文档的宽度不会更新。我相信这是因为比例不会触发重绘。如果我申请例如位置：绝对；页面将被重绘。

什么是导致重绘但通常不会对样式产生任何影响的 css 属性？

更新日期

由于 Apple 是一家价值 2 万亿美元的公司，让我们尝试通过在此处提交错误报告来让他们解决此问题： https: //www.apple.com/feedback/safari.html

https://discussions.apple.com/thread/251753724?answerId=253364840022&page=1

在 Chrome 和 Firefox 中没有问题，但在 safari 中出现问题：

它应该看起来像 Chrome 中的：

如果我将固定样式=“位置：固定”添加到外部div，那么它们的位置是正确的，但它们的大小仍然是safari中较小的那个。

我尝试将 Body 添加到对象的根目录中，但这只是让它们从 Safari 中完全消失。这篇文章也提到了这一点：

Safari 不考虑应用于foreignObject 的缩放

您可以非常清楚地听到 safari（新 ie）不尊重缩放

假设我有一个这样的风格,有一个过渡:

#theElement {
    position: relative;
    left: 200px;
    transition: left 1s;
}

还有一些代码:

var element = document.getElementById("theElement");

function animateX(px) {
    element.style.left = px + "px";
}

所以,简单animateX地说有一个函数,简单地说它的作用,动画左边的属性,theElement现在如果我还想要一个立即设置左属性的函数,没有转换:

function setX(px) {
    element.style.transition = "none";
    element.style.left = px + "px";
    element.style.transition = "left 1s";
}

为什么这不起作用,我该如何解决？

我正在使用此代码将 svg 插入 div 标签。

var container = document.getElementById("div_id");
var svg = document.createElement("svg");
svg.setAttribute("width",container.clientWidth);
svg.setAttribute("height",container.clientHeight);    
container.appendChild(svg);

在浏览器中使用开发人员工具进行检查时，div 中存在 svg。但是，当我将鼠标悬停在开发人员工具中的 svg 上时，它显示“svg 0*0”，即即使宽度和高度属性设置为 500 和 400，我也无法在页面中查看它。我试图在 svg 中插入一行，这在 svg 中也可以看到，但在浏览器中不可见。需要帮忙。