Safari瀏覽器渲染頁面字體更薄與jQuery滑塊頁

我拉我的頭髮在這一個。我在頁面上使用FlexSlider，效果很好;但是在運行時，Safari（Mac版本，不是ios）會使頁面上的字體變得更薄。 Firefox和Chrome都沒有問題。這裏是我的基本代碼，以防萬一：Safari瀏覽器渲染頁面字體更薄與jQuery滑塊頁

<html> 
<head> 
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" href="css/flexslider.css" /> 
<title>Title</title> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="js/flexslide.js"></script> 
</head> 

<body> 
<div id="header"><span class="slogan">Slogan At The Top</span></div> 

<h1>View These Slides</h1> 
<div class="gallery"> 
<div class="flexslider-container"> 
<div class="flexslider"> 
<ul class="slides"> 
<li><div class="slider">Element 1</div></li> 
<li><div class="slider">Element 2</div></li> 
</ul> 
</div> 
</div> 
</div> 

</body> 
</html>

我實際上假設在這種情況下的代碼不會幫助。我覺得它更像是一個Safari和FlexSlider中的問題。我認爲我已經將問題縮小到了FlexSlider對translate3d的使用範圍，但它並沒有出現。

有沒有其他人經歷Safari改變基於jQuery元素的字體厚度，甚至像Flash視頻（在這種情況下不使用）？另外，我沒有使用任何嵌入式字體，fyi。

來源

2012-01-28 user1161032

無法重現此。你可以提供一個屏幕截圖，比較在Safari和其他瀏覽器中不存在這個問題的渲染情況嗎？ – Jonas 2012-01-29 21:31:26

共享這個，因爲它解決了這個問題，我...我只是簡單地添加以下到我的CSS文件

html { -webkit-font-smoothing: antialiased; }

這是一個反向修正，因爲它改變了你的頁面上的文本的其餘部分在滑塊中顯示。這樣做會需要您修改flexslider JavaScript代碼。

從這裏得到這個：https://github.com/desandro/isotope/issues/209#issuecomment-7377938

來源

2012-08-12 21:31:44

雖然我想用另一種方式來解決這個問題，但它確實通過使所有內容均勻一致來解決問題。 – user1161032 2012-08-13 13:04:47

我想我已經找到了正確的答案。檢查我的答案。 – dotty 2013-05-07 14:10:05

*請停止「修復」字體平滑：* http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/ – 2013-09-21 00:15:13

我也一直在努力。在我的情況下，字體似乎褪色。看了這個和其他討論後，我通過禁用Flexslider中的webkit轉換來修復它。我相信這可能會消除Safari瀏覽器的硬件加速，但至少可以工作。我正在使用Flexslider 1.8版。

在Flexslider JavaScript文件（不是精縮），查找靠近頂部以下代碼：

//Test for webbkit CSS3 Animations 
slider.transitions = "webkitTransition" in document.body.style;

更改第二行：

slider.transitions = false;

我希望這個作品它爲您。（我也打開更好的解決方案:-)

來源

2012-02-21 03:09:12 James

這只是一個CSS修復。下面防止文本的減薄的WebKit（Safari /鉻）：

.flexslider {position:relative;z-index:1}

如果你控制的資產淨值不滑的正上方是絕對的，那麼這應該是所有的，如果你的定位在上方，像我這樣的，然後我這樣做：

.flex-control-nav {position: absolute; top: 0;left:0;overflow:hidden;z-index: 2;}

因爲在Firefox和Chrome某些佈局隱藏在.flex-control-nav添加溢出，我的MacBook上，兩根手指就不會刷卡的頁面，但移動頁面本身圍繞在引起轉移至少100％或更多。

來源

2012-06-19 16:43:23 Christina

您還可以使用包含任何z-indexed 1或更高的任何佈局的同位素獲得這種稀化。請執行以下操作：https://github.com/desandro/isotope/issues/209#issuecomment-6429557 – Christina 2012-06-19 16:47:22

不幸的是，這並不適用於我。實際上，我對Chrome沒有任何問題，因此它對Safari更具體，而不是一般的Webkit。現在這是一個謎。 – user1161032 2012-06-19 20:54:43

你有沒有工作過？我注意到，如果flexslider上的z-index是2，那麼其他東西可以是1，並且它不會變薄，但是如果某些其他元素高於flex滑塊上的z-index，則文本會變薄。此外，Flexslider 2有一個選項可以關閉css轉換，這使得細化在滑塊之後的所有元素都消失了，對於之前的元素，我必須使用z-index。多麼痛苦。 – Christina 2012-07-25 17:46:31

我不認爲@Will施密特的回答是正確的。

我發現，在樣式表，上面寫着

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; }

應該

.flexslider .slides > li {display: none; }

這爲我工作，而他的回答沒有（像他開始行，它影響所有文字）。

來源

2013-05-07 14:09:28 dotty

這工作^^^^^ – Henryz 2013-08-05 06:53:35

添加：

position: relative; z-index: 1;

到該行：

.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; }

固定對我來說：

.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; position: relative; z-index: 1; }

來源

2014-01-16 16:37:58

Safari瀏覽器渲染頁面字體更薄與jQuery滑塊頁

回答

相關問題