title: CSS transform rotate not rendering on Webkit / iPhone (but works in Chrome Devtools device toolbar)
body: <p>tl;dr: As stated in my title: CSS transform rotate not rendering on Webkit / iPhone (but works in Chrome Devtools device toolbar).</p>
  
  <p><strong>Update</strong>: I've also created a separate GitHub issue for this which is more concise (arguably easier to read) and without code excerpts in it, <a href="https://github.com/riyadshauk/family-photos-client/issues/1" rel="nofollow noreferrer">here</a>.</p>
  
  <hr>
  
  <p>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 <strong>from Chrome / Safari on the iPhone, it doesn't rotate the images</strong>.</p>
  
  <p>Here's some relevant code:</p>
  
  <pre class="lang-js prettyprint-override"><code>// 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 (
        &lt;Fragment&gt;
          &lt;p&gt;
            Date: {this.state.date}
          &lt;/p&gt;
          &lt;img alt={this.state.date} className={className} style={styles} ref={el =&gt; this.element = el} /&gt;
        &lt;/Fragment&gt;
      );
    }
  </code></pre>
  
  <p>Also, I'm not very good with CSS, but here's my CSS code:</p>
  
  <pre class="lang-css prettyprint-override"><code>/* PhotoFeed.css */
  /* https://stackoverflow.com/questions/14142378/how-can-i-fill-a-div-with-an-image-while-keeping-it-proportional#answer-20341542 */
  :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;
  }
  </code></pre>
  
  <p>which corresponds to this code in the React Component:</p>
  
  <pre class="lang-js prettyprint-override"><code>// PhotoFeed.js
  return (
                &lt;div className={styles.photoContainer} key={idx}&gt;
                  &lt;LazyImage className={styles.photos} src={`${apiRootURL}/photos/demo/${fileName}?token=${Authentication.getToken()}`}/&gt;
                &lt;/div&gt;
              );
  </code></pre>
  
  <p>The full code is also available for both the <a href="https://github.com/riyadshauk/family-photos-server" rel="nofollow noreferrer">server-side</a> and the <a href="https://github.com/riyadshauk/family-photos-client" rel="nofollow noreferrer">client-side</a> code (in case anybody wants to actually run the entire program, though the client code is the main code in question here). The demo code is also live at <a href="https://riyadshauk.com/photos" rel="nofollow noreferrer">this</a> website and can be accessed <a href="https://github.com/riyadshauk/family-photos-server/blob/master/alter-scripts/alter000.sql" rel="nofollow noreferrer">like so</a>, in case anybody wants to test the front-end of the website from some kind of browser tool.</p>
  
  <p>I also looked into some of the advice <a href="https://stackoverflow.com/questions/4919963/css3-transform-not-working">here</a>, but I just don't understand why the CSS isn't working on the iPhone, but it is working on both Chrome and Safari on my macOS.</p>
  
  <hr>
  
  <p><strong>Some Updates</strong></p>
  
  <p><strong>UPDATE 1</strong>:</p>
  
  <p>I tried <a href="https://stackoverflow.com/questions/24658365/img-tag-displays-wrong-orientation#answer-50591539">this</a>, as @MohammadRF suggested in the comment, but it still doesn't work. In more detail, I added those same classes to my CSS, and update my react code as follows:</p>
  
  <pre class="lang-js prettyprint-override"><code>const styles = {
        // '-webkit-transform':  transformRotationValue,
        // '-moz-transform':     transformRotationValue,
        // '-ms-transform':      transformRotationValue,
        // '-o-transform':       transformRotationValue,
        // transform:            transformRotationValue,
        height:               '500px',
      }
      return (
        &lt;Fragment&gt;
          &lt;p&gt;
            Date: {this.state.date}
          &lt;/p&gt;
          &lt;img alt={this.state.date} className={className + ` rotate${360 - this.state.orientation}`} style={styles} ref={el =&gt; this.element = el} /&gt;
        &lt;/Fragment&gt;
      );
  </code></pre>
  
  <p>That doesn't work because the CSS just doesn't even get applied from the className, even on the browser without webkit (although the class list does get updated in the rendered HTML code). So my original (and current) solution works a bit better so far.</p>
  
  <hr>
  
  <p><strong>Update 2</strong>:</p>
  
  <p>I just realized my Chrome DevTools were giving me the following warnings {face-palm}:</p>
  
  <pre><code>index.js:1446 Warning: Unsupported style property -webkit-transform. Did you mean WebkitTransform?
  
  index.js:1446 Warning: Unsupported style property -moz-transform. Did you mean MozTransform?
  
  index.js:1446 Warning: Unsupported style property -ms-transform. Did you mean msTransform?
  
  index.js:1446 Warning: Unsupported style property -o-transform. Did you mean OTransform?
  </code></pre>
  
  <p>So now I've fixed it so that the warnings don't show up:</p>
  
  <pre class="lang-js prettyprint-override"><code>    const rotationValue = 360 - this.state.orientation;
      const transformRotationValue = `rotate(${rotationValue}deg)`;
      const styles = {
        WebkitTransform:  transformRotationValue,
        MozTransform:     transformRotationValue,
        msTransform:      transformRotationValue,
        OTransform:       transformRotationValue,
        transform:        transformRotationValue,
        height:           '500px',
      }
  </code></pre>
  
  <p>...but it's still properly rotating on my macOS Chrome/Safari but <strong>still not rotating on the iPhone browsers</strong>.</p>