我有一个设置为800px的div标签.当浏览器宽度大于800px时,它不应该拉伸,但它应该将它带到页面的中间.widthdiv
我想把我的中心div和我使用这种方法,但它使我的文本div模糊:
<!-- language: lang-css -->
#div {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
有没有办法让我的中心div？
我发现Chrome和其他WebKit浏览器大量模糊任何已应用translate3d的css缩放内容的问题.
这是一个JS小提琴:http://jsfiddle.net/5f6Wg/.(在Chrome中查看.)
.test {
-webkit-transform: translate3d(0px, 100px, 0px);
}
.testInner
{
/*-webkit-transform: scale(1.2);*/
-webkit-transform: scale3d(1.2, 1.2, 1);
text-align: center;
}<div class="test">
<div class="testInner">
This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
</div>
</div>有没有任何已知的解决方法？我在上面的简单示例中得到了这个,我可以简单地使用translate而不是translate3d - 这里的重点是将代码剥离到最基本的要素.
自从我添加了一个css过渡(第一个是悬停,第二个是动画)它似乎搞砸了我的字体,它们看起来"不同".
这是完全奇怪的,我已经找了好几个小时,找不到任何东西,我也无法弄清楚它为什么会发生.
在firefox中似乎没问题,但是safari和chrome有问题.
左下方齿轮动画下方的所有内容看起来都像一个较轻的字体重量,导航菜单看起来看起来一样.
我完全迷失在这一个.
这是动画的CSS.
.gearone {height:100px;
width:100px;
top:-10px;
left:-10px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
-webkit-animation-name: backrotate;
-webkit-animation-duration: 13s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function:linear;
-moz-animation-name: backrotate;
-moz-animation-duration: 13s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
.geartwo {height:100px;
width:100px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
top:20px;
left:10px;
-webkit-animation-name: rotate;
-webkit-animation-duration: 13s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function:linear;
-moz-animation-name: rotate;
-moz-animation-duration: 13s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count: infinite;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to { …一切都在Firefox上运行良好,但chrome显示动画文本模糊.我做了所有的事情-webkit-font-smoothing: subpixel-antialiased;,-webkit-transform: translate3d(0,0,0);以及之前提到的一切:
基于Webkit的模糊/失真文本后期动画通过translate3d
但问题仍然存在.
我做了一个非常简单的例子来向你展示它的样子.我该如何解决这个问题？
var text = 1;
function next() {
var next = (text == 2) ? 1 : 2;
document.getElementById('text' + text).className = 'out';
document.getElementById('text' + next).className = 'in';
text = next;
}body {
padding: 0;
margin: 0;
font-family: tahoma;
font-size: 8pt;
color: black;
}
div {
height: 30px;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
div div {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0; …我使用此代码将一个部分居中:(这是我可以做的唯一方法,以此部分为中心)
<div class="clock-section">
<h5 id="clock-title">We are coming really soon</h5>
<hr class="hr" id="cdhr">
</div>
CSS:
.clock-section {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
该部分很好地集中,但问题是文本变得模糊,而且hr看起来很丑陋和模糊,
我已经尝试了所有方法,如webfont平滑等,但根本不起作用!:(
任何人都可以帮助我吗？
谢谢......
在下面的示例中,包含一些文本的DIV(示例A)在transform: translate应用CSS 时会略微模糊.
而在文本示例B中,字体是尖锐的.
该问题仅在Google Chrome上发生,并且可在FireFox 46.0.1上正常运行.我能够重现它:
实例:
http://jsbin.com/calidefune/edit?html,output
我想知道,如果我的代码出现问题,或者是Chrome中的错误.
也有任何想法如何解决它是值得欢迎的,考虑到我想transform: translate尽可能保持,我主要针对最新的Chrome和FireFox.
到目前为止我注意到的事项:
webkit-font-smoothing : none;没有帮助.#test {
position: fixed;
font-size: 20px;
top: 60%;
left: 40%;
}
#splashScreen__spinner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -90px);
width: 50px;
height: 50px;
}
#splashScreen__infos {
position: fixed;
font-size: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-font-smoothing: none;
}
.loadingSpinner {
width: inherit;
height: inherit;
border: 5px solid …