相关疑难解决方法(0)

使用转换和缩放Chrome和FireFox时,文字会模糊

当我同时使用transition和transform,那么动画是不是都非常流畅chrome和firefox.当你将鼠标悬停在它上面时它会模糊.唯一正常的浏览器是IE.

Chome/FireFox(注意文本,当动画开始时它开始变得模糊.当它完成时它会弹回到平滑的字母.)

期望的结果(这在IE中工作)

如何让这些动画也光滑chrome和firefox？

片段:

转换完成后,元素必须再次聚焦.那是什么样子,现在的chrome和firefox.

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  transition: all .33s ease-in-out;
}

button:hover {
  transform: scale(1.1);
  transition: all .33s ease-in-out;
}

Run Code Online (Sandbox Code Playgroud)

<button>Hover me</button>

Run Code Online (Sandbox Code Playgroud)

css firefox google-chrome css3

Red*_*Red

2018 03-23

14
推荐指数

1
解决办法

1708
查看次数

使用transform:scale来防止模糊渲染

我正在div使用transform属性进行扩展,但我希望保持其子(具有1px宽度或高度)相同的大小.我反算了它们.5,预期的结果是一个1px按2缩放的元素,然后是.5,应该最终返回1px,但它们结束了模糊2px.

这是缩放之前的方框:

.container {
    width: 200px;
    height: 200px;
    margin: 100px;
    background-color: #EEE;
    position: absolute;
}

.outline {
    position: absolute;
    background: #1899ef;
    z-index: 999999;
    opacity: 1 !important;
}

.outlineBottom, .outlineTop {
  width: 100%;
  height: 1px;
}

.outlineLeft, .outlineRight {
    height: 100%;
    width: 1px;
}

.outlineRight {
    right: 0px;
}

.outlineBottom {
    bottom: 0px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
    <div class="outline outlineTop"></div>
    <div class="outline outlineRight"></div>
    <div class="outline outlineBottom"></div>
    <div class="outline outlineLeft"></div>
</div> …

Run Code Online (Sandbox Code Playgroud)

html css3

Ell*_*lle

2017 05-23

9
推荐指数

1
解决办法

6013
查看次数

Chrome 显示 Lottie 动画模糊

我遇到了缩放 Lottie 动画的问题，Chrome 模糊了动画。当动画缩放时，这一点尤其明显。

在我的示例中，原始动画的尺寸为 842x596px，渲染效果越小，效果越差：

截图模糊的lottie动画对比chrome和firefox

如果您想在 Chrome 浏览器中重现它，这里是示例代码：

lottie-player {
  border: 1px solid lightblue;
}

body {
  color: lightgray;
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<!--
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
300x300px 
-->
                    
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 200px; height: 200px;" loop autoplay></lottie-player>
200x200px

<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 150px; height: 150px;" loop autoplay></lottie-player>
150x150px
 
 <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 100px; height: 100px;" loop autoplay></lottie-player>
100x100px
 
 <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 50px; height: 50px;" loop autoplay></lottie-player> …

Run Code Online (Sandbox Code Playgroud)

animation google-chrome blurry lottie

wit*_*ich

lucky-day

4
推荐指数

1
解决办法

3788
查看次数

当chrome中的比例发生变化时,滚动条不会被修改

我有一个div,在div里面我有一个'svg'元素.我想放大,每次点击'svg'元素的'scale'值都会增加,从而产生缩放效果.但是,由于某种原因,当内部'svg'的比例增大时,父div的滚动条没有被修改.这个问题只出现在Chrome中,在IE中我实际上得到了想要的结果.

小提琴的例子

var elementToScale = document.getElementById('svg');
var scale = 1;

document.getElementById('zoom').addEventListener('click', function() {
  scale += 0.1
  elementToScale.style.transform = "scale(" + scale + ")";
});

Run Code Online (Sandbox Code Playgroud)

div {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  overflow: scroll;
}
svg {
  border: 1px solid black;
}

Run Code Online (Sandbox Code Playgroud)

<div>
  <svg width=300px height=300px id="svg">
    <rect width=200 height=200 x=50 y=50 fill="red" />
  </svg>
</div>
<br>
<button id="zoom">
  ZoomIn
</button>

Run Code Online (Sandbox Code Playgroud)

html javascript css css-transforms

Joe*_*Joe

2017 01-04

2
推荐指数

1
解决办法

598
查看次数