CSS Transformation Does Not Rotate Rendering on Webkit / iPhone (however Works in Toolbar of Chrome Devtools Equipment)


As said in my title: The CSS transformation doesn’t rotate the rendering on Webkit / iPhone (however works within the Chrome Devtools toolbar).

Only for a context (in case it issues): I name my Specific API from React, getting pictures and their related orientations mapped to 0, 180 and 270 levels clockwise. reveals in relation to the vertical (from the EXIF ​​knowledge), then utilizing CSS to rotate them as soon as I already make an preliminary rendering. On the similar time that I scroll the web page, I additionally load the pictures. I'm utilizing the brand new IntersectionObserver API that requires the polyfill for WebKit / Safari (so I included it in a script tag from the foundation index.html in my public listing). All of this works high quality from Google Chrome with out polyfill, and from Safari with polyfill, however Chrome / Safari on the iPhone, pictures will not be rotated.

Here’s a related code:

// LazyImage.js
render () {
const {className} = this.props;
const transformRotationValue = `rotate ($ {360 - this.state.orientation} deg)`;
const = {
& # 39; -webkit-transform: transformRotationValue,
& # 39; -moz-transform: transformRotationValue,
& # 39; -ms-transform: transformRotationValue,
& # 39; -o-transform: transformRotationValue,
rework: transformRotationValue,
top: 500px,
}
return (
      
        

Date: {this.state.date}

{this.state.date} this.aspect = el} />
) }

Furthermore, I'm not excellent at CSS, however right here is my CSS code:

/ * PhotoFeed.css * /
/ * https://stackoverflow.com/questions/14142378/how-can-i-fill-a-div-with-an-image-while-keeping-it-proportional#answer-20341542 * /
: native (.pictures) {
width: inherit;
versatile shrinkage: 0;
minimal top: 100%
}
: native (.photoContainer) {
top: 500px;
show: flex;
justify-content: middle;
align-items: middle;
hidden overflow;
high margin: 2px;
}

which corresponds to this code within the React element:

// PhotoFeed.js
return (
              
)

The entire code can be accessible for each on the server aspect and the shopper aspect code (in case somebody wish to run this system in full, though the shopper code is the primary code in query right here). The demo code can be accessible on this web site and may be accessed so, in case anybody wish to take a look at the web site from a navigation device.

I've additionally checked out a few of the ideas proper right here, however I simply don’t perceive why the CSS doesn’t work on the iPhone, but it surely works simply as effectively on Chrome as on Safari on my macOS.



Supply hyperlink

Recent Comments

    Categories

    Login to your account below

    Fill the forms bellow to register

    Retrieve your password

    Please enter your username or email address to reset your password.