family-photos | App to host family photos
kandi X-RAY | family-photos Summary
kandi X-RAY | family-photos Summary
App to host family photos
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of family-photos
family-photos Key Features
family-photos Examples and Code Snippets
Community Discussions
Trending Discussions on family-photos
QUESTION
tl;dr: As stated in my title: CSS transform rotate not rendering on Webkit / iPhone (but works in Chrome Devtools device toolbar).
Update: I've also created a separate GitHub issue for this which is more concise (arguably easier to read) and without code excerpts in it, here.
Just for some context (in case it matters): I'm calling my Express API from React, getting images and their associated orientations which I mapped to values 0, 180, and 270 degrees clockwise from the vertical (from the EXIF data), then using CSS to rotate them once I already do an initial render. I'm also lazy-loading images as I scroll down the page, so am using the new IntersectionObserver API which requires the polyfill for WebKit / Safari (so I've included that polyfill in a script tag of the root index.html in my public directory). This all works fine from Google Chrome without the polyfill, and from Safari with the polyfill, but from Chrome / Safari on the iPhone, it doesn't rotate the images.
Here's some relevant code:
...ANSWER
Answered 2019-Jan-19 at 07:14The main issue was identifying the problem. Here's the face-palm moment: It turns out the the browsers (Chrome and Safari) on the iPhone automatically orient the jpeg images to the desired orientation, but Desktop browsers don't do that. Once I realized this, it was a 5-minute fix. I looked through this MDN page and this tutorial to check the user agent string on the iPhone from Safari dev tools, then came up with this simple solution for my render method:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install family-photos
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page