Cropping in drupal not working on ie10 - css

I am trying to allow user to crop their images in Drupal 7.
I am using the imagefield crop module and also tried the manual crop module.
Both work great in Chrome.
In IE10 for imagefield crop the image shrinks and doesn't expand - I end up with large white areas in the preview area. Also the preview squishes the image so as not to keep the aspect ratio.
Bizarrely when the image is then saved it has the proper aspect ratio on display?
For manual crop I get an alert message to say "It appears that some of the images could not be loaded for cropping, please try again in another browser."
It also appears to work fine in IE11 on windows 8 machine...
Thanks for any help!

Have you tried using the edge tools (Developer tools) - f12 on Windows 8 to try and replicate it in IE10

Related

Firefox not rendering size properly of lavarel/bootstrap

A very weird thing happened a couple of hours ago. I am developing a new site - which is already live Utopia Africa - using laravel & bootstrap. I am normally using Firefox on my mac to view the local site. Suddenly everything started to be rendered "big" by Firefox as for a cellphone but with text extremely big (see image below) and all logos/images at full size (although img-fluid). The size of text and images do not change when resizing the window. I tried everything like clearing cache, rebooting... However, the same local site is perfectly rendered on chrome, opera & safari. And once again, the same source file (I compared them) is rendered well on firefox when on the live server (as the above link shows). I am pulling my hair off with this one... any idea?
Have you zoomed Firefox by accident? Press CTRL + 0 to set the viewport zoom to 100% instead of 300% it is now on.
Firefox zoom option:
https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages

Images are inconsistently rotated 90deg for no reason within unstyled <img> tags

I have an image hosted on Amazon S3 that is being flipped from portrait to landscape when put inside a completely unstyled <img> tag.
Chrome shows it as horizontal in the page: http://imgur.com/kJNzNQG,PgJPUsm#0
But when I open in new tab it displays as portrait. http://imgur.com/kJNzNQG,PgJPUsm#1
Results:
wget: returns a vertical image.
All Browsers inside image tag: horizontal
Chrome, safari, FF in new tab: vertical
IE new tab: horizontal
I cannot directly link to image samples because they are profile photos of users and confidential.
Has anyone encountered this before? How can we identify if the true image is vertical or horizontal, and why is it being auto-rotated in some places but not others?
Sometimes EXIF data will store a orientation for the picture. Some software will process this and show you the properly rotated version, while other software will ignore it and show you the picture's 'native' rotation. To add further complexity, I have found that my cell phone is less reliable in setting this orientation flag correction.
More information on the EXIF orientation flag -> http://www.impulseadventure.com/photo/exif-orientation.html
Online EXIF reader -> http://regex.info/exif.cgi

Safari Mobile experiencing strange spacing issues

I am about to launch a new Joomla site, and the only minor bug holding me up (not really effecting launch, just annoying) is this strange issue with iPhone (using Safari Mobile). You can see it in the image attached or use http://synthphone.com/ to see it.
Any ideas? I haven't noticed any other issue on any other browser or device. Link to the page is http://www.complisolutions.com/services.
Thanks for any assistance!
It's most likely a font size issue - note the word 'environmental' - looks to me like that cannot fit in the space allocated between the image and the left side of the screen.
Try remove that word to see if this is the case.
What you'll want to do, is use media queries to firstly make that image full page width at small screen resolutions and secondly to remove the float.

INSTAPRESS WP PLUGIN - CSS Image Sizing on Mobile and Desktop alignment

I am having issues getting my Instagram images to display properly. I have tried all types of tricks and changes but cannot get it to look consistent on both desktop and mobile. It looks perfect when at full window size and across all browsers (except mobile), but when I change the size of the browser viewing window it gets all weird.
Here is my issue:
I need all the horizontal Instagram images to be responsive, meaning when I do change the size of the browser window they will adjust to the dimensions that are appropriate to view them properly. I want them to always stay in a row of 5 images across...
Here is a link to the work in progress:
http://www.jaygiroux.com/wordpress/
I have tried modifying the instapress.css to the best of my abilities but now I'm just stuck. I tried using percentages instead of pixels in some places but it's still not working...
What im reading online is that until version 3 nivo slider is not responsive, so you might want to update the library.
http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/
Also i noticed that you're calling the tag twice (the first one is between the ie class compatibility code) so watch out for that too.

Images Have Strange Tint Only in Firefox

I am having an issue with Firefox rendering a few of the .png's that I have loaded into a Wordpress blog that I am preparing for a client. The images look fine in IE 8 & 9, and chrome, but it looks very off in Mozilla. I was informed by our other UX guy that Firefox complies with embedded color profiles that may warp the tint of your image. You can view the tint shift by going to :
http://blog.hendrickspower.com
If anybody has any idea of how to over ride the color profile, I'd definitely appreciate the heads up!
Thanks
Here is an image that shows the difference that I am seeing.
alt http://s11.postimage.org/jbnzek4g3/color_embed.jpg
The difference in rendering is due to an ICC color profile embedded in the image. When Firefox finds a color profile it will combine it with the color profile of the display and adjust image rendering accordingly. This will normally make sure that the image is displayed the same on different displays. However, it might also cause undesired effects if the display profile is incorrect.
At least Windows 7 allows you to calibrate display colors. Not sure whether this feature was also present in earlier Windows versions but they definitely allowed selecting a color profile file in the advanced display settings - you could replace the driver-supplied profile by sRGB.
If you absolutely don't want different image display on different computers then you should just remove the color profile from the image with a tool like jStrip and pngcrush.

Resources