tl;dr: My CSS transform rotate is not rendering on Webkit / iPhone, but it works in Chrome Devtools device toolbar.
Update: I've also opened a separate GitHub issue that is more concise and easier to read, without code excerpts, here.
Giving some context: I'm fetching images and their orientations from my Express API in React. The orientations are mapped to values (0, 180, 270 degrees), then I use CSS to rotate them after the initial render. I lazy-load images while scrolling down using IntersectionObserver API with polyfill for WebKit/Safari included. Works fine in Google Chrome without polyfill and Safari with polyfill, but not rotating images in Chrome/Safari on iPhone.
Here's the relevant code snippet:
// LazyImage.js
render() {
const { className } = this.props;
const transformRotationValue = `rotate(${360 - this.state.orientation}deg)`;
const styles = {
'-webkit-transform': transformRotationValue,
'-moz-transform': transformRotationValue,
'-ms-transform': transformRotationValue,
'-o-transform': transformRotationValue,
transform: transformRotationValue,
height: '500px',
}
return (
<Fragment>
<p>
Date: {this.state.date}
</p>
<img alt={this.state.date} className={className} style={styles} ref={el => this.element = el} />
</Fragment>
);
}
My CSS code:
/* PhotoFeed.css */
:local(.photos) {
width: inherit;
flex-shrink: 0;
min-height: 100%
}
:local(.photoContainer) {
height: 500px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
margin-top: 2px;
}
React Component code:
// PhotoFeed.js
return (
<div className={styles.photoContainer} key={idx}>
<LazyImage className={styles.photos} src={`${apiRootURL}/photos/demo/${fileName}?token=${Authentication.getToken()}`}/>
</div>
);
You can find the full code for both server-side and client-side. The demo code is live at this website.
Tried suggestions from Stack Overflow post, but CSS still not working on iPhone browsers despite working on macOS Chrome/Safari.
Some Updates
UPDATE 1:
Tried another suggestion from comments, but didn't work as expected. Class updates in HTML but CSS doesn't apply properly.
Update 2:
Fixed warnings about unsupported style properties in Chrome DevTools, but images still not rotating on iPhone browsers.