1
我有一個博客大小，它將博客標題和特色圖像分塊。包裝 - JavaScript：Safari渲染問題
然後，塊由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'),
\t \t $block2x2 = $content.find('.block2x2'),
\t \t $block2x1 = $content.find('.block2x1'),
\t \t $block1x1 = $content.find('.block1x1'),
itemSelector = '.block',
\t \t stamp = '.stamp',
\t \t $h1widget = $('.h1widget'),
$instagramwidget = $('#text-2'),
$twitterwidget = $('.widget_fetch_tweets_widget_by_id'),
\t \t twitteractualheight = $twitterwidget.height(),
columnWidth = '.grid-sizer',
gutter = '.gutter-sizer',
\t \t rowHeight2 = $('.grid-sizer').width(),
columnWidth2 = $('.grid-sizer').width(),
gutter2 = $('.gutter-sizer').width();
\t \t
\t \t $h1widget.css({
'width' : columnWidth2,
'height' : columnWidth2,
\t \t \t 'left': '',
'top' : 0
});
\t \t $instagramwidget.css({
'width' : columnWidth2,
'height' : columnWidth2,
\t \t \t 'right': '',
'top' : columnWidth2 + gutter2
});
\t \t
\t \t if (twitteractualheight <= (columnWidth2 + gutter2 + columnWidth2 + gutter2)){ \t
\t \t $twitterwidget.css({
'width' : columnWidth2,
'height' : '',
\t \t \t 'minHeight': columnWidth2 + gutter2 + columnWidth2,
\t \t \t 'right': '',
'top' : columnWidth2 + gutter2 + columnWidth2 + gutter2,
});
\t \t } else {
\t \t \t $twitterwidget.css({
'width' : columnWidth2,
'height' : '',
\t \t \t 'minHeight': columnWidth2 + gutter2 + columnWidth2 + gutter2 + columnWidth2,
\t \t \t 'right': '',
'top' : columnWidth2 + gutter2 + columnWidth2 + gutter2,
});
\t \t }
\t function initPackery() {
\t \t if ($(window).width() <= 600){
\t \t \t $content.imagesLoaded(function() {
\t \t \t $content.isotope({
\t \t \t \t layoutMode: 'packery',
\t \t \t \t packery: {
\t \t \t \t \t gutter: gutter,
\t \t \t \t \t columnWidth: columnWidth,
\t \t \t \t \t transitionDuration: 0,
\t \t \t \t },
\t \t \t \t stamp: stamp,
\t \t \t \t itemSelector: itemSelector,
\t \t \t \t percentPosition: true,
\t \t \t });
\t \t });
\t \t } else {
\t \t $content.imagesLoaded(function() {
\t \t \t $content.isotope({
\t \t \t \t layoutMode: 'packery',
\t \t \t \t packery: {
\t \t \t \t \t gutter: gutter,
\t \t \t \t \t columnWidth: columnWidth,
\t \t \t \t \t transitionDuration: 0,
\t \t \t \t \t isAnimated: false
\t \t \t \t },
\t \t \t \t stamp: stamp,
\t \t \t \t itemSelector: itemSelector,
\t \t \t \t percentPosition: true,
\t \t \t });
\t \t });
\t \t }
\t }
function resizeAll() {
$block3x3 = $content.find('.block3x3');
$block3x2 = $content.find('.block3x2');
$block3x1 = $content.find('.block3x1');
\t \t $block2x2 = $content.find('.block2x2');
\t \t $block2x1 = $content.find('.block2x1');
\t \t $block1x1 = $content.find('.block1x1');
\t \t rowHeight2 = $('.grid-sizer').width();
columnWidth2 = $('.grid-sizer').width();
gutter2 = $('.gutter-sizer').width();
\t \t $h1widget = $('.h1widget');
$instagramwidget = $('#text-2');
$twitterwidget = $('.widget_fetch_tweets_widget_by_id');
\t \t
\t \t if ($(window).width() <= 650){
\t \t \t stamp = null;
\t \t } else {
\t \t \t stamp = '.stamp';
\t \t }
\t \t
\t \t
if ($(window).width() <= 550){
\t \t \t
\t \t \t
\t \t \t $block3x3.css({
\t \t \t \t 'width' : columnWidth2 + columnWidth2 + gutter2,
\t \t \t \t 'height' : ''
\t \t \t });
\t \t \t
\t \t \t $block3x2.css({
\t \t \t \t 'width' : columnWidth2 + columnWidth2 + gutter2,
\t \t \t \t 'height' : ''
\t \t \t });
\t \t \t
\t \t \t $block3x1.css({
\t \t \t \t 'width' : columnWidth2 + columnWidth2 + gutter2,
\t \t \t \t 'height' : ''
\t \t \t });
\t \t \t
\t \t \t
\t \t \t
\t \t } else {
\t \t \t \t $block3x3.css({
\t \t \t \t 'width' : columnWidth2 + columnWidth2 + columnWidth2 + gutter2 + gutter2,
\t \t \t \t 'height' : columnWidth2 + columnWidth2 + columnWidth2 + gutter2 + gutter2,
\t \t \t });
\t \t \t
\t \t \t $block3x2.css({
\t \t \t \t 'width' : columnWidth2 + columnWidth2 + columnWidth2 + gutter2 + gutter2,
\t \t \t \t 'height' : columnWidth2 + columnWidth2 + gutter2,
\t \t \t });
\t \t \t
\t \t \t $block3x1.css({
\t \t \t \t 'width' : columnWidth2 + columnWidth2 + columnWidth2 + gutter2 + gutter2,
\t \t \t \t 'height' : columnWidth2
\t \t \t });
\t \t }
\t \t
$block2x2.css({
'width' : columnWidth2 + columnWidth2 + gutter2,
'height' : columnWidth2 + columnWidth2 + gutter2,
});
\t \t $block2x1.css({
'width' : columnWidth2 + columnWidth2 + gutter2,
'height' : columnWidth2
});
\t \t $block1x1.css({
'width' : columnWidth2,
'height' : columnWidth2
}); \t \t
\t \t $h1widget.css({
'width' : columnWidth2,
'height' : columnWidth2,
\t \t \t 'left': '',
'top' : 0
});
\t \t $instagramwidget.css({
'width' : columnWidth2,
'height' : columnWidth2,
\t \t \t 'right': '',
'top' : columnWidth2 + gutter2
});
\t \t if (twitteractualheight <= (columnWidth2 + gutter2 + columnWidth2 + gutter2)){ \t
\t \t $twitterwidget.css({
'width' : columnWidth2,
'height' : '',
\t \t \t 'minHeight': columnWidth2 + gutter2 + columnWidth2,
\t \t \t 'right': '',
'top' : columnWidth2 + gutter2 + columnWidth2 + gutter2,
});
\t \t } else {
\t \t \t $twitterwidget.css({
'width' : columnWidth2,
'height' : '',
\t \t \t 'minHeight': columnWidth2 + gutter2 + columnWidth2 + gutter2 + columnWidth2,
\t \t \t 'right': '',
'top' : columnWidth2 + gutter2 + columnWidth2 + gutter2,
});
\t \t }
\t \t
\t \t
}
function initInfinite() {
$('.gridwrapper').infinitescroll({
\t \t \t loadingImg: "ajax-loader",
nextSelector: ".next-posts a",
navSelector: ".navigation",
itemSelector: ".packeryblock",
appendCallback: true,
\t \t \t bufferPx: 100
}, function(appended) {
resizeAll();
\t \t \t $('.gridwrapper').isotope('stamp', $(stamp));
$('.gridwrapper').isotope('appended', appended);
initPackery();
});
}
// End Functions //
// Actions
$(window).on('resize', function() {
\t \t \t resizeAll();
initPackery();
});
$(window).load(function(){
initInfinite();
\t \t resizeAll();
\t \t 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 {
\t position: absolute;
\t left: 0;
\t bottom: 20px;
}
.gutter-sizer {
\t width:2%;
}
.grid-sizer {
\t width:15%;
}
@media (min-width: 500px){
\t .gutter-sizer {
\t \t width:4%;
\t }
\t .grid-sizer {
\t \t width:48%;
\t }
}<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">
\t <a class="block-wrapper" href="page-url">
\t <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中看起來合理...謝謝！