themes
/
casper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

🐛 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
This commit is contained in:
Kevin Ansfield 2019-10-24 17:15:34 +01:00 committed by GitHub
parent 17ba4add5c
commit 307c334cd5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/casper.js.map
View File

File diff suppressed because one or more lines are too long

5
assets/js/infinite-scroll.js
View File

@ -45,7 +45,10 @@
// append contents // append contents
var postElements = this.response.querySelectorAll('.post-card'); var postElements = this.response.querySelectorAll('.post-card');
postElements.forEach(function (item) { 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 // set next link