Develop Reference

Misalignment and Black/Blank upload when cropping images with Croppie.js and a Modal

When working on a website on my local server, I came across an issue with Croppie.js. The issue only happens when a modal is used to crop the image — for example, everything works fine here:
[codepen](https://codepen.io/azerafati/pen/VzOGRe)
I was able to reconstruct the issue on Codepen using the following image.
The Issue
With a modal on Codepen, the issue only happens in the Editor view — Image B:
[codepen](https://codepen.io/amatek/pen/GREvEbG). Surprisingly, everything seems to work as expected in the Details view — Image A: [codepen](https://codepen.io/amatek/details/GREvEbG).
Normal behaviour: When using the zoom slider on the modal in the Details view, the image is transformed from the center.
The bug: However, the image is transformed from a corner when in the Editor view. This somehow leads to a black image being uploaded when the crop button is clicked.
Sometimes (depending on the amount of zoom applied), instead of a black image:
only the left side of the image is uploaded with the right side is
cut off; or
the image is uploaded zoomed in to the corner.
There is still misalignment even when the zoom is not applied.
Environment
From my tests so far, this issue does not happen on mobile browsers (although I only tested with Google Chrome and Mozilla Firefox). I have noticed the issue on Desktops with Windows 7 and 10 (I am yet to test on other Operating Systems).
Bug Present
Windows 10: Google Chrome and Microsoft Edge
Windows 7: Microsoft Edge
No Bug
Windows 10: Mozilla Firefox
Windows 7: Google Chrome and Mozilla Firefox
My Efforts so far
I have tried debugging the croppie.css and croppie.js files, but to no avail. However, I strongly suspect the problem lies in the js file. It might have something to do with the the css transform-origin property or the functions for obtaining the image dimensions returning different values on modals. Does anyone have an idea on what the cause of this issue might be?

Got this problem on latest Chrome when used croppie inside of modal
Helped me to change style in bootstrap modal .modal-dialog class
image
Style that you need to update
Setting transform to unset instead of using translate function.
Hope it helps you too

It appears that the extra padding applied to the outer modal div by bootstrap when triggering the modal('show') was what caused the problem, for me at least. Once I removed the extra padding the problem was fixed. Seems like this padding somehow messed with the point calculation when cropping or moving the viewport. I'm still using an older bootstrap version though, so I'm not sure if that would be a fix for the newer ones.
I had this problem on Chrome only probably caused by their last update, since everything was working fine for some time now. On Mozilla there were no issues to begin with.

react app positioning some image differently

this is a strange one. when I look at my application products screen some images are position differently to others and are more central. when I try and recreate this in google chrome or firebox browser with the dev tool and mobile view they are positioned correctly. its just showing this strange positioning on some images. As it is only showing as problem on my samsung s10 and not in the browsers I cant troubleshoot. any help or ideas would be appreciated.
The link to the hosted app is here and would need to be viewed on a mobile to recreate this problem, thanks
https://webdev-davidm.github.io/E-commerce-front-end/#[![enter image description here]1]1

check your browser you might need to add some libraries..not sure which one you can check this on mdn documentation

Three.js textures not rendering on mobile and weird brightness issue

So I made a project using Three.js and everything works how I want it to on desktop browsers, tested using chrome, and firefox. When I try to open the project on any mobile browser, safari, chrome, or IE, some objects are not rendered these objects have normal maps and textures which appear fine on desktop but are not rendered at all on mobile. In addition objects appear to be overly bright on mobile and sometimes flicker going from behind one another to in front of one another.
One user suggested adding this.image = image; to the three.js file at line 18420 but this did not solve the issue. Here is a link to the project here http://pixelpusher.ninja/Ocean%20World/OceanWorld.html. You can inspect the page to view the source code. Has anyone ran into problems like this on mobile before? Any help is appreciated. Thanks!

Website loading times out, images are missing, load half-way, and sometimes appear in wrong places

I've ran into this very peculiar issue where the wordpress website I am working on (Click to see) , looks and works great on all browsers except Safari on iPhone.
The site seems to be loading and times out half way. Sometimes images appear in wrong places, sometimes they're cut off mid-image. We've tested the site on OSX, Windows, in Chrome, Safari, Firefox, and iOS Chrome and it appears to be working great. The interesting thing is that this problem seems to be exclusive to Mobile Safari, consistently across multiple devices from different networks.
Here's are a few examples of what we're seeing:
In this photo should be a background image and a menu icon in the nav.
And in this photo what is that image doing in there? There should be another logo and these should be scrolling right to left instead of being displayed vertically.
And in this one Some images don't load at all and some don't load all the way.
And also in this one same portion of the website as above, except nice and crisp, how it should look. This was using iOS Chrome.
We tried isolating the issue by switching over to the default Twenty Fifteen wordpress theme, where we created an image heavy blog post (without any widgets), and the issue persisted.
We've been clearing browser caches and using W3 Total Cache to clear WP cache, but no luck.
Also had the website host, Namecheap, reset the server configs, just in case that would solve the issue, but, alas, no luck either.
Has anyone run into this bizarre issue in the past? Any ideas what else we could try?
Thank you so much in advance!

PhoneGap: different behavior Simulator vs. Device

Very strange problem:
I've created a small HTML5 canvas game with box2dweb.js.
So far, all my work has been on desktop and today I've decided to move it to the iPhone (which usually consists of wrapping the app in a PhoneGap/Cordova application, change a few settings, and that's it.
The problem is, when I run the app on my desktop browsers (Chrome, Safari) as well as the iPhone and iPad simulators - everything works correctly - but when I actually deploy to my device (iPhone 4S) only some of the pictures show up. In fact, only the player sprite animation plays, and everything else (while still there physically) does not get drawn unless it doesn't have a specific animation (whether it's a sequence of images or just one image).
What seems even more strange, is that only the player entity is being drawn (with animation, too!) but all other entities that have animations are simply not drawn.
I've attached images to show the differences:
My question is - where do I even start debugging this? I tried running the index.html page without the cordova app on the iOS simulator so I could access the debug console, but there were no issues. How is this even possible? I was under the impression that if it worked as a web page, it should work as a PhoneGap app.

Alright, I've solved the problem. It was incredibly simple but hard to find. It's not even a PhoneGap problem:
The game has a level editor, and so it also has a saving/loading mechanism. While I specify all the images as './graphics/image.png', when a level gets deserialized it saves the loaded image's source, and not the original './graphics...' path. So the problem was that I was trying to load local files from my computer to my iPhone. I guess it was a path problem after all...