Поворот CSS-преобразования не отображается на Webkit / iPhone (но работает на панели инструментов устройства Chrome Devtools)

Question

tl; dr: Как указано в моем заголовке: CSS-преобразование вращается, не рендеринг на Webkit / iPhone (но работает на панели инструментов устройства Chrome Devtools).

Обновление : я также создал для этого отдельную проблему GitHub, которая является более краткой (возможно, легче читаемой) и без выдержек из кода, здесь .

---

Только для некоторого контекста (в случае, если это имеет значение): я вызываю мой Express API из React, получая изображения и связанные с ними ориентации, которые я сопоставил со значениями 0, 180 и 270 градусов по часовой стрелке от вертикали (из EXIF данные), затем с помощью CSS, чтобы повернуть их, когда я уже делаю начальный рендер. Я также лениво загружаю изображения, когда прокручиваю страницу вниз, поэтому использую новый API IntersectionObserver, который требует polyfill для WebKit / Safari (поэтому я включил этот polyfill в тег script корневого index.html в моем публичный каталог). Все это прекрасно работает с Google Chrome без полифилла и с Safari с полифилом, но из Chrome / Safari на iPhone, он не поворачивает изображения .

Вот соответствующий код:

// 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>
    );
  }

Кроме того, я не очень хорош с CSS, но вот мой код CSS:

/* 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;
}

, который соответствует этому коду в компоненте React:

// PhotoFeed.js
return (
              <div className={styles.photoContainer} key={idx}>
                <LazyImage className={styles.photos} src={`${apiRootURL}/photos/demo/${fileName}?token=${Authentication.getToken()}`}/>
              </div>
            );

Полный код также доступен для серверной и клиентской кодов (на случай, если кто-то захочет запустить всю программу целиком, хотя клиентский код основной код здесь под вопросом). Демонстрационный код также доступен на этом веб-сайте и может быть доступен примерно так же , на случай, если кто-нибудь захочет протестировать интерфейс веб-сайта с помощью какого-либо инструмента браузера.

Я также ознакомился с некоторыми советами здесь , но я просто не понимаю, почему CSS не работает на iPhone, а работает на Chrome и Safari на моих macOS.

---

Некоторые обновления

ОБНОВЛЕНИЕ 1 :

Я пытался это , как @MohammadRF предложил в комментарии, но это все еще не работает. Более подробно, я добавил те же классы в свой CSS и обновил свой код реакции следующим образом:

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 + ` rotate${360 - this.state.orientation}`} style={styles} ref={el => this.element = el} />
      </Fragment>
    );

Это не работает, потому что CSS просто даже не применяется из className, даже в браузере без webkit (хотя список классов действительно обновляется в отображаемом HTML-коде). Так что мое оригинальное (и текущее) решение пока работает немного лучше.

---

Обновление 2 :

Я только что понял, что мои Chrome DevTools дают мне следующие предупреждения {face-palm}:

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?

Так что теперь я исправил это, чтобы предупреждения не появлялись:

    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',
    }

... но он все еще правильно вращается на моем MacOS Chrome / Safari, но все еще не вращается в браузерах iPhone .

Answer 1

Основной проблемой было выявление проблемы. А вот и момент, когда мы говорим о лице: оказывается, что браузеры (Chrome и Safari) на iPhone автоматически ориентируют изображения в формате JPEG в нужную ориентацию, но настольные браузеры этого не делают. Как только я понял это, это было 5-минутное исправление. Я просмотрел эту страницу MDN и этого урока , чтобы проверить строку пользовательского агента на iPhone из инструментов разработчика Safari, а затем нашел простое решение для моего метода рендеринга:

render() {
    let { className } = this.props;
    const styles = {
      transform:  'rotate(0deg)',
      height:     '500px',
    }
    if (navigator.userAgent.indexOf('iPhone') === -1) {
      styles.transform = `rotate(${360 - this.state.orientation}deg)`;
    }
    return (
      <Fragment>
        <p>
          Date: {this.state.date}
        </p>
        <img alt={this.state.date} className={className} style={styles} ref={el => this.element = el} />
      </Fragment>
    );
  }