transform導致字體模糊的bug

weakish 發布于2019-08-30 14:10 / 3084人閱讀

摘要：我在給一個定位元素垂直居中的時候慣性的設置了設置完成后沒有發現問題，后來無論時美工還是測試都反應這個元素字體模糊。后來經過反復排除認定了時的鍋。經過查資料時應為要移動的元素的高度時奇數的。動畫在渲染非整數的時就會出現字體模糊。

我在給一個定位元素垂直居中的時候慣性的設置了

.element {
  position: absolute;
  top: 50%;
  transfome: translateY(-50%);
}

設置完成后沒有發現問題，后來無論時美工還是測試都反應這個元素字體模糊。

我還是第一次遇見這個問題。后來經過反復排除認定了時 transform 的鍋。

經過查資料時應為要移動的元素的高度時奇數的。css 動畫在渲染非整數的 px 時就會出現字體模糊。甚至時上下反復移動。

解決辦法：

給定居中元素偶數高度(基本沒用，很多情況我們無法寫死高度)。

不用動畫用margin,不過margin的百分比是相對于父級的。我們還是要知道元素的準確高度。

.element {
  position: absolute;
  top: 50%;
  margin-top: ...;
}

給與定位元素一個父級。使用height:100% 然后設置flex布局的垂直居中

.father {
  display:flex;
  align-items:center
}

GPU云服務器云服務器字體模糊系統字體模糊模糊引擎字體導致證書錯誤的原因

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115821.html

[總結]CSS/CSS3常用樣式與web移動端資源

摘要：不允許負值用百分比來定義縮放比例。解決這個很簡單，在父元素中使用即可解決該。列寬度由單元格內容設定。定義僅有大寫字母。不過，要讓任何元素生效還得借助于一點點。 css/css3常用樣式 CSS修改選中文字的顏色 html代碼：第一段文字選中效果第二段文字選中效果 css代碼： .p1::selection{background:red;color:#fff;} .p2::selec...

The question 2019-08-28 17:54 評論0 收藏0
第六天移動端Web開發注意事項

摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...

妤鋒シ 2019-08-30 13:09 評論0 收藏0
第六天移動端Web開發注意事項

摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...

xbynet 2019-08-01 15:58 評論0 收藏0
移動端web app自適應布局探索與總結

摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設計稿為基準等比例設置。給根節點設置一個基礎值，然后頁面的所有元素布局均相對于該值采用單位設定。 1、困擾多時的問題在這之前做web app開發的的時候，在自適應方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個平衡值寫死，我們的設計稿都是iPhone5的640 * 1136標準，所以高度一般取個大概值，各種圖標的...

Benedict Evans 2019-08-21 10:44 評論0 收藏0