I've implemented a mobile version of a website http://www.ecss-jobs.com. I've used some media queries at 900px for laptop / medium devices, and 768px for phones / small devices.For Apple devices (safari and chrome), the CSS breaks for the detailed job listing page. I find this very strange as it works perfectly in the Chrome Responsive Design tool when selecting all the Apple devices...It occurs on all iPhones I believe (tested iPhone 7 and iPhone XR), though I'm unable to reproduce it on my desktop. I suspect this is because I'm using a specific CSS attribute which doesn't work for the iOS webkit but I'm only using flexbox so I'd expect this to work.
I'm not sure which parts of the CSS to attach, but the React code is not minified and available from the sources tab. The entire App overview is available at /static/js/App.tsx, and the specific module responsible for this page is at /static/js/components/JobDetails.tsx (from the sources tab). Thank you in advance.
Examples of working and not working are attached below:
Apple broken:
Android working as intended:
Related
My react js portfolio website's some sections are not displaying in mobile mode. How to fix that?
My problem is that on mobile devices, My code works fine on desktop
Use media query for making it responsive. Try this.
https://mui.com/material-ui/react-use-media-query/
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 have created my first microsite with Umbraco/ASP.NET at www.surreyhillsmt.co.uk. I started with a bootstrap theme called Agency from startbootstrap.com, and find that the smooth page scrolling from my menu works on the Edge browser and both Safari and Firefox on an iPhone/iPad.
However, smooth page scrolling does not work on either Firefox or Chrome on a PC (fully updated Windows 10, and both Firefox and Chrome installed within last couple of days). This problem is not exhibited by the static bootstrap theme that I used.
I would really appreciate any help. By way of background I am competent with C# and okay with HTML/CSS. I have zero knowledge of javascript and the like.
This is no longer a problem. Oddly this was fixed with the passage of time. I guess it was a caching related issue.
I am building a WordPress website and there is a second navigation box that is only displayed on small mobile devices. I cannot figure out for the life of me how to get rid of it. I am unable to find out what it even is due to a lack of page inspection tools on android.
mangapunch.com is the website and I use a Samsung Galaxy S3 to get a feel for small mobile devices so if you do any checking I would suggest a similarly sized android phone.
I would love an explanation for why it is there and what causes it to exist.
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.