Packery - JavaScript：Safari渲染问题

Question

我有一个博客大小，可以将博客标题和特色图片整理成块。

然后通过Packery.js组织块，以便它们在视口的宽度上平铺，并且每个块之间没有空格。

这在除了Safari之外的所有测试浏览器中呈现得很好，在那里它将所有div混合在一起。

你之前见过这个吗？您能为可能的解决方案提出什么建议？

设置为：

// Dependencies: Isotope.js, Packery.js, ImagesLoaded.js

var $content = $('.site-main'),
        $block3x3 = $content.find('.block3x3'),
        $block3x2 = $content.find('.block3x2'),
        $block3x1 = $content.find('.block3x1'),
		$block2x2 = $content.find('.block2x2'),
		$block2x1 = $content.find('.block2x1'),
		$block1x1 = $content.find('.block1x1'),
        itemSelector = '.block',
		stamp = '.stamp',
		$h1widget = $('.h1widget'),
        $instagramwidget = $('#text-2'),
        $twitterwidget = $('.widget_fetch_tweets_widget_by_id'),
		twitteractualheight = $twitterwidget.height(),
        columnWidth = '.grid-sizer',
        gutter = '.gutter-sizer',
		rowHeight2 = $('.grid-sizer').width(),
        columnWidth2 = $('.grid-sizer').width(),
        gutter2 = $('.gutter-sizer').width();
		

		$h1widget.css({
            'width' : columnWidth2,
            'height' : columnWidth2,
			'left': '',
            'top' : 0
        });
		$instagramwidget.css({
            'width' : columnWidth2,
            'height' : columnWidth2,
			'right': '',
            'top' : columnWidth2 + gutter2
        });
		
		if (twitteractualheight <= (columnWidth2 + gutter2 + columnWidth2 + gutter2)){	
		$twitterwidget.css({
            'width' : columnWidth2,
            'height' : '',
			'minHeight': columnWidth2 + gutter2 + columnWidth2,
			'right': '',
            'top' : columnWidth2 + gutter2 + columnWidth2 + gutter2,
        });
		} else {
			$twitterwidget.css({
            'width' : columnWidth2,
            'height' : '',
			'minHeight': columnWidth2 + gutter2 + columnWidth2 + gutter2 + columnWidth2,
			'right': '',
            'top' : columnWidth2 + gutter2 + columnWidth2 + gutter2,
        });
		}

	function initPackery() {
		if ($(window).width() <= 600){
			$content.imagesLoaded( function() {
			$content.isotope({
				layoutMode: 'packery',
				packery: {
					gutter: gutter,
					columnWidth: columnWidth,
					transitionDuration: 0,
				},
				stamp: stamp,
				itemSelector: itemSelector,
				percentPosition: true,
			});
		});
		} else {
		$content.imagesLoaded( function() {
			$content.isotope({
				layoutMode: 'packery',
				packery: {
					gutter: gutter,
					columnWidth: columnWidth,
					transitionDuration: 0,
					isAnimated: false
				},
				stamp: stamp,
				itemSelector: itemSelector,
				percentPosition: true,
			});
		});
		}
	}

    function resizeAll() {
    $block3x3 = $content.find('.block3x3');
        $block3x2 = $content.find('.block3x2');
        $block3x1 = $content.find('.block3x1');
		$block2x2 = $content.find('.block2x2');
		$block2x1 = $content.find('.block2x1');
		$block1x1 = $content.find('.block1x1');
		rowHeight2 = $('.grid-sizer').width();
        columnWidth2 = $('.grid-sizer').width();
        gutter2 = $('.gutter-sizer').width();
		$h1widget = $('.h1widget');
        $instagramwidget = $('#text-2');
        $twitterwidget = $('.widget_fetch_tweets_widget_by_id');
		
		if ($(window).width() <= 650){
			stamp = null;
		} else {
			stamp = '.stamp';
		}
		
		
        if ($(window).width() <= 550){
			
			
			$block3x3.css({
				'width' : columnWidth2 + columnWidth2 + gutter2,
				'height' : ''
			});
			
			$block3x2.css({
				'width' : columnWidth2 + columnWidth2 + gutter2,
				'height' : ''
			});
			
			$block3x1.css({
				'width' : columnWidth2 + columnWidth2 + gutter2,
				'height' : ''
			});
			
			
			
		} else {
				$block3x3.css({
				'width' : columnWidth2 + columnWidth2 + columnWidth2 + gutter2 + gutter2,
				'height' : columnWidth2 + columnWidth2 + columnWidth2 + gutter2 + gutter2,
			});
			
			$block3x2.css({
				'width' : columnWidth2 + columnWidth2 + columnWidth2 + gutter2 + gutter2,
				'height' : columnWidth2 + columnWidth2 + gutter2,
			});
			
			$block3x1.css({
				'width' : columnWidth2 + columnWidth2 + columnWidth2 + gutter2 + gutter2,
				'height' : columnWidth2
			});

		}
		
        $block2x2.css({
            'width' : columnWidth2 + columnWidth2 + gutter2,
            'height' : columnWidth2 + columnWidth2 + gutter2,
        });
		$block2x1.css({
            'width' : columnWidth2 + columnWidth2 + gutter2,
            'height' : columnWidth2
        });
		$block1x1.css({
            'width' : columnWidth2,
            'height' : columnWidth2
        });		
		$h1widget.css({
            'width' : columnWidth2,
            'height' : columnWidth2,
			'left': '',
            'top' : 0
        });
		$instagramwidget.css({
            'width' : columnWidth2,
            'height' : columnWidth2,
			'right': '',
            'top' : columnWidth2 + gutter2
        });
		if (twitteractualheight <= (columnWidth2 + gutter2 + columnWidth2 + gutter2)){	
		$twitterwidget.css({
            'width' : columnWidth2,
            'height' : '',
			'minHeight': columnWidth2 + gutter2 + columnWidth2,
			'right': '',
            'top' : columnWidth2 + gutter2 + columnWidth2 + gutter2,
        });
		} else {
			$twitterwidget.css({
            'width' : columnWidth2,
            'height' : '',
			'minHeight': columnWidth2 + gutter2 + columnWidth2 + gutter2 + columnWidth2,
			'right': '',
            'top' : columnWidth2 + gutter2 + columnWidth2 + gutter2,
        });
		}
		
		
    }

    function initInfinite() {
        $('.gridwrapper').infinitescroll({
			loadingImg: "ajax-loader",
            nextSelector: ".next-posts a",
            navSelector: ".navigation",
            itemSelector: ".packeryblock",
            appendCallback: true,
			bufferPx: 100
        }, function(appended) {
             resizeAll();            
			$('.gridwrapper').isotope('stamp', $(stamp));
            $('.gridwrapper').isotope('appended', appended);
            initPackery();
        });
    }

    // End Functions //

    // Actions

    $(window).on('resize', function() {
			resizeAll();
            initPackery();
    });

    $(window).load(function(){
        initInfinite();
		resizeAll();
		 initPackery();
    });
});

// Force window resize on document load so that content renders perfectly on Safari -- Ben R.

Outlayer.prototype._getMeasurement = function( measurement, size ) {
    var option = this.options[ measurement ];
    var elem;
    if ( !option ) { // default to 0
       this[ measurement ] = 0;
    } else {
    if ( typeof option === 'function') { //accept a function, apologies for the hack style
       this[ measurement ] = option.call(this, null);
    } else { // use option as an element
       if ( typeof option === 'string' ) {
        elem = this.element.querySelector( option );
       } else if ( isElement( option ) ) {
            elem = option;
       } // use size of element, if element
        this[ measurement ] = elem ? getSize( elem )[ size ] : option;
        } //eo option === function
      } //eo option?
}; //eo _getMeasurement

var config = {
   containerStyle: null, //let us worry about the container
   columnWidth: packery.columnWidth, //bind a function to the columnWidth instead of a fixed selector
   gutter: 0 //get crazy and pack them in tight
};
Packery.columnWidth = function() {
   var width = $('home-content').innerWidth(); //how wide is the container for the layout to pack into
   var columns = packery.columns; //how many columns are there for our layouts
   return (width / columns); //send back the current value dynamically
};

.block-title {
	position: absolute;
	left: 0;
	bottom: 20px;
}
.gutter-sizer {
	width:2%;
}
.grid-sizer {
	width:15%;
}
@media (min-width: 500px){
	.gutter-sizer {
		width:4%;
	}
	.grid-sizer {
		width:48%;
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="home-entry-content" class="entry-contentjs-isotope"
  data-isotope-options='{ "itemSelector": ".block", "layoutMode": "fitRows" }'>
  <article class="block block3x2">
	<a class="block-wrapper" href="page-url">
	  <img width="588" height="384" src="image-source.jpg" class="attachment-block3x2" alt="image alt" />
      <span class="block-title yellow_title">Title</span>
     </a>
    </article>

有没有人成功克服过渲染问题？我尝试了一些解决方案，包括：

https://github.com/metafizzy/packery/issues/134

https://github.com/metafizzy/packery/issues/44

最奇怪的是，当您手动调整视口大小时，行为就是我所期望的，所有项目都已打包并堆叠。

很高兴找到任何解决方法，以便网站在Safari中看起来合理......谢谢！

Answer 1

啊哈，我明白了！

实际上我认为JavaScript问题被证明是一个奇怪的Safari渲染问题。

为了克服这个问题，我使用了一些特定于Safari的CSS黑客来指定容器的大小，如下所示：

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media {
.block {
    display: inline;
}
.block-title {
    width:370px;
}
.block3x3 {
    width: 588px;
    height: 588px;
}
.block3x2 {
    width: 588px;
    height: 384px;
}
.block3x1 {
    width: 588px;
    height: 180px;
}
.block2x2 {
    width: 384px;
    height: 384px;
}
.block2x1 {
    width: 384px;
    height: 180px;
}
.block1x1 {
    width: 180px;
    height: 180px;
}

这使Safari能够独立于其中包含的图像来了解容器的大小。

我想。

如果有人可以阐明为什么会发生这种情况，我很想了解更多信息。