Browse Source

🐛 Fixed images on infinite scroll index pages being stretched in Safari (#636)

closes #634, closes #635

- use `document.importNode` to create a clone of post card elements when pulling them in from infinite scroll pages
- cloning the element means the element's owner document matches the viewed document and ensures images in the inserted post card elements are sized according to the viewed document
master
Kevin Ansfield 8 months ago
committed by GitHub
parent
commit
307c334cd5
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 2 deletions
  1. +1
    -1
      assets/built/casper.js.map
  2. +4
    -1
      assets/js/infinite-scroll.js

+ 1
- 1
assets/built/casper.js.map
File diff suppressed because it is too large
View File


+ 4
- 1
assets/js/infinite-scroll.js View File

@@ -45,7 +45,10 @@
// append contents
var postElements = this.response.querySelectorAll('.post-card');
postElements.forEach(function (item) {
feedElement.appendChild(item);
// document.importNode is important, without it the item's owner
// document will be different which can break resizing of
// `object-fit: cover` images in Safari
feedElement.appendChild(document.importNode(item, true));
});

// set next link


Loading…
Cancel
Save