First, sorry for my english. I'm from Russia, I've tried to get answer on russian version of Stack Overflow, but no success.
Right now I'm doing a website on my work. It contains a lot of heavy images and visual effects (according to designer's layout). While I was testing the main page, I ran into strange bug. It is very difficult to catch it, but our designer saw it on his iPhone XS max and iMac with Retina display 5K. Me on my Xiaomi Redmi 4A, iMac Retina 4K and Macbook Air 17 couldn't catch it.
Please, take a look at the screenshot. How this block works: we have three pictures, when user swipes left or right, they are moving, and centered image is scaling to 110%. I'm doing it via CSS3 and jQuery.
It looks like a trace from immediately stopped vehicle. Does anybody now why this happening? Maybe I'm doing something wrong?
Images are in PNG. On screenshot you can see two normal states and one with bug. Bug was captured on iPhone XS max, normal states are captured in Chrome Developer mode (simulating iPhone 6/7/8 plus).
Thank you
Link to picture:
Bug
Related
I have an angular 2 application in production environment that allows you to choose a profile picture. Recently, performing tests with safari mobile, specifically for IOS 13.3.1 version(older) and IOS 13.4.1(new) version. I noticed that the image is shown rotated depending of safari browser version used (I built a stackblitz for this that you can review):
IOS 13.3.1 version(older)
IOS 13.4.1(new)
When I take images from an iPhone's in portrait mode and upload the image to my app it is shown rotated only for IOS 13.3.1 version(older). However, I examined the EXIF meta-information images from each of my devices and found that both images have the same value in the orientation property:
IOS 13.3.1 version(older)
IOS 13.4.1(new)
My question is. Why does the image display change depending on the IOS version, knowing that in both cases the orientation EXIF is the same value (6)?
This is a subject that worries me since I had already solved this problem by rotating the image depending of EXIF orientation value for its correct display (e.g. exif.js have been created to handle this situation by detecting the exif orientation flag), but this problem now appears again with the new version of IOS. What would be an example of code that I can use to make it sustainable over time? Is there not a consensus among the browsers to manage the orientation of the images?
What is the explanation for this illogical behavior?
Thank you so much!
We also stumbled upon this when our mobile suddenly behaved differently and finally find the root cause of this.
Both WebKit (iOS) and Android (Chrome) have just recently changed the default behavior of the image-orientation CSS propterty. While it was none before, it is now from-image. This means: Before, they ignored the EXIF data of an image by default, while they are now using it to auto-correct the image. Which break our own auto-correction based on the exifreader library.
Here are some relevant links:
https://www.fxsitecompat.dev/en-CA/docs/2020/jpeg-images-are-now-rotated-by-default-according-to-exif-data/
https://bugs.webkit.org/show_bug.cgi?id=89052
Funny enough, also the Slack team seems to have run into this:
https://bugzilla.mozilla.org/show_bug.cgi?id=1634180
Fortunately, the author of the exifreader library (who just some weeks later ran into the same problems) also guided me to a way to detect the behavior. You can find his answer here:
https://github.com/mattiasw/ExifReader/issues/99#issuecomment-640217716
I also noticed that Modernizr has a test for this, so I am actually using a custom modernizr build now to detect the browser behavior.
The webkit browser is rotating the images before you upload them based on the EXIF data then it gets applied again by your app. We were able to confirm this on new (81) version of Chrome and Mobile Safari on 13.4. then the app is rotating them further and it gets twisted.
I've been trying to solve an issue that only happens on Windows phone 8. They use as a browser IE10. In many responsive design projects I've checked that all the mobile phones work correctly except this mobile phone and it's browser.
The issue
The images are bigger than the viewport itself making the image overflow by the right side of the screen. This overflow creates an uncomfortable scrolling in it's x-axis.
Possible solutions which did not work for me
Matt stow solution
CSS tricks solution
I'm testing with a nokia lumia 925 and a nokia lumia 520. If I apply this solution they both have different layouts. Especially the nkia 925 as it has a big resolution the media queries act strangely, as it was a tablet.
Does anybody have a clear and working solution which does not break other devices layout?
Just yesterday i had the same Problem and yes i visited the same pages like you.
I just added an
.im_the_parent_class_of_the_image {
overflow:hidden
}
to the parent class/element of the image and it still works fine for me and no other browser was affected.
I am developing a website which can be found here.
In a nutshell this is a fluid dynamics solver executing in webgl fragment shaders. The result is mapped to a textured quad and rendered on the canvas.
While doing some development work this weekend, I noticed that the Low and Medium resolution versions of the page are no longer working on Chrome (see the links in top right corner). However, if you open the page in Firefox everything works as expected. Be warned, this page is not expected to work on mac unless you've enabled webgl, it doesnt work in IE, and I havent tested it with opera.
A few other odd symptoms:
The mapping of mouse position to canvas position is now wrong in chrome unless the window is fullscreen.
The low and medium quality version appear to show only a tiny section of the low right corner of the texture.
To observe this in low/medium click the Analyze tab, and quickly change the velocity slider between low and high. Try this out in high mode to see the difference.
Last weekend the framerate in chrome was 60fps on my machine, its now 30fps even in high quality. Firefox gets a stead 60fps
The only real difference between the low, medium and high implementations is the texture resolution, which is 256x32, 512x64, 1024x128 respectively.
Can anyone shed some light on what is going on?
I'm not sure if this is the problem, but based on the simulation (and the corruption artifacts I'm seeing) it seems like you may be using floating point textures to store/render the simulation state. There was a semi-recent change in Chrome that fixed a bug in how filtered floating point textures were exposed and required some code changes. You can read about it here:
IMPORTANT: Your WebGL floating point texture usage needs to be fixed!!!!
This is the site I'm developing: http://www.syndicatetx.com/
This site displays correctly on iPhone, and 4 other android devices I tested but on my galaxy s3 it appears to remove the css class for the logo.
Problem:
logo doesn't appear on s3
"Welcome to the Syndicate Where Old Jazz Comes Alive Open May 2013" Doesn't appear. The weird thing is. The text is there! just not visible.
(You can copy and paste the text in the mobile browser)
If you scroll to bottom and then scroll up real quick the logo loads for 1 second then disappears.
https://www.dropbox.com/s/zod5eo9dh7tupr3/2013-05-06%2010.08.31.png
If I use chrome or firefox on s3 everything looks perfect.
If I use dolphin (with jetpack) it's perfect.
If I use dolphin (without jetpack) same as screenshot.
I realize I need to get into mobile debugging but as of right now everything I saw for mobile debugging was for chrome and firefox which displays the page correctly so doesn't really help.
I would just leave this as a comment but don't have high enough rep yet...
I had trouble with S3 before because of its extremely high resolution in comparison to other phones. I see that you are using 480, 750, 800px to identify devices. Just be aware that the high resolution of that phone 1280 x 720.
I was working on an image gallery and it involved some heavy image moving\resizing using javascript. Everything worked like a charm on all the broswers except for IE6\7 (no wonder) and ... Google Chrome.
Basically under certain zooming each movement made Chrome redraw the background, making it jitter, change its position and then move back. I can't post link to the actual script at the moment, but I used a jquery plugin to immitate the problem:
http://danilsk.narod.ru/wtf.html (try zooming in and out and clicking images)
Does anyone know how to fight this?
I am using google chrome and I see no issue here.
Everything is running very smoothly. Try updating your browser.
FYI:
Ubuntu 10.04 LTS - the Lucid Lynx
Google Chrome 8.0.552.215