Jssor silder圖像在safari中丟失質量

Question

新版本的Jssor不會出現此問題。

---

Demo

 jQuery(document).ready(function ($) { 
 
      var options = { 
 
       $AutoPlay: true, 
 

 
       $PauseOnHover: true, //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false 
 

 
       $ArrowKeyNavigation: true, //Allows arrow key to navigate or not 
 
       $SlideWidth: 141, //[Optional] Width of every slide in pixels, the default is width of 'slides' container 
 
       $SlideHeight: 200, //[Optional] Height of every slide in pixels, the default is width of 'slides' container 
 
       $SlideSpacing: 25, //Space between each slide in pixels 
 
       $DisplayPieces: 3, //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1 
 
       $ParkingPosition: 0, //The offset position to park slide (this options applys only when slideshow disabled). 
 

 
       $ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not 
 
        $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance 
 
        $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always 
 
        $AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 
 
        $Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1 
 
       } 
 
      }; 
 

 
      var jssor_slider1 = new $JssorSlider$("slider1_container", options); 
 

 
      //responsive code begin 
 
      //you can remove responsive code if you don't want the slider scales while window resizes 
 
      function ScaleSlider() { 
 
       var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth; 
 
       if (parentWidth) jssor_slider1.$ScaleWidth(Math.min(parentWidth, 800)); 
 
       else window.setTimeout(ScaleSlider, 30); 
 
      } 
 

 
      ScaleSlider(); 
 

 
      if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) { 
 
       $(window).bind('resize', ScaleSlider); 
 
      } 
 
      //if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) { 
 
      // $(window).bind("orientationchange", ScaleSlider); 
 
      //} 
 
      //responsive code end 
 

 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<script src="http://www.jssor.com/js/jssor.slider.js"></script> 
 
<script src="http://www.jssor.com/js/jssor.js"></script> 
 
<div id="slider1_container" style="position: relative; top: 0px; left:0 px; width: 420px; 
 
     height: 245px;"> 
 
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 420px; height: 245px; 
 
      overflow: hidden;"> 
 
     <div> 
 
      <img u="image" src="http://www.jssor.com/img/landscape/02.jpg" class="tissue_image" /> 
 
     </div> 
 
     <div> 
 
      <img u="image" src="http://www.jssor.com/img/landscape/03.jpg" class="tissue_image" /> 
 
     </div> 
 
     <div> 
 
      <img u="image" src="http://www.jssor.com/img/landscape/04.jpg" class="tissue_image" /> 
 
     </div> 
 
     <div> 
 
      <img u="image" src="http://www.jssor.com/img/landscape/05.jpg" class="tissue_image" /> 
 
     </div> 
 
    </div> 
 
</div>

在演示中，圖像輸在Safari質量，但它在其他瀏覽器確定。

如何通過程序解決這個問題？

有一些相關的問題，即手動更改原始圖像大小以適應容器，但由於某種原因，我不能手動更改大小，它必須通過程序。

我認爲它需要修改關於如何生成滑塊圖像的「jssor.slider.js」或「jssor.slider.js」，但我不知道它是否是正確的方法。

任何知道「jssor滑塊」的人會幫助我嗎？謝謝！！！

Answer 1

我也遇到過Safari和JSSOR的問題。對於指定的圖像尺寸，Safari對於其他主流瀏覽器似乎忽略它的實際圖像尺寸非常挑剔，以支持響應代碼。標準演示中使用的圖像（以及您的代碼示例，除非您更改了它們）爲600x300px，但您爲滑塊容器和幻燈片本身指定420x245。將這兩個值更改爲您正在使用的圖像的實際大小，Safari將正常工作。

Answer 2

您是否有Retina顯示屏？

Safari將圖像大小調整爲顯示的幻燈片大小，但嚴重不足以使它們看起來模糊不清。更等Retina顯示屏，因爲他們是在爲72dpi，而不是144

的解決方案是在JSSOR禁用硬件加速，詳見this post

嘗試添加以下內容到JSSOR選項：

$HWA: false 

Answer 3

我注意到你製作的原始滑塊的大小爲'width：420px; height：245px;'。請增大原始尺寸。

您知道，當您製作較小的滑塊並將其縮放到較大尺寸時，它可能看起來模糊不清。但是，如果您製作大滑塊並將其縮放到較小尺寸，則不會失去質量（在Safari中）。