I'm not a very experienced developer by any means, so these issues may have resolutions that are more obvious to you than me.
The site I'm developing is ion123.com.
I've been using my LG G4 for mobile testing. Site looks great on that particular device. Looks like butt on Safari, iPhones, and iPads. Seems like IOS isn't picking up my media queries at all, and I am using the viewport tag in the head section.
It's also not picking up styling for certain elements. For example, the left sidebar buttons on the Solutions page.
I would really appreciate some guidance here. Thanks!
It seems to be an issue with your main_style.css file. Try running through https://jigsaw.w3.org/css-validator/ and a few errors will come up that other browsers are ok with but safari fail on.
You have a number of keyframe animations that are incomplete, you should fix them or remove them (ln 234-237, 240-243, 258-261)
Ln 252 letter spacing doesn't have a valid value. Should have a 'px' after 1.2
Ln 355 random '/' character should be removed.
Once these issues were fixed the website started displaying correctly on my iOS devices and Safari (on desktop)
Related
I'm building a website using the Showit site builder and am getting this very frustrating bug where iOS makes the letters have wider spacing between them, causing some text boxes to overlap. It's correct on all other browsers and devices, but not iOS.
Scroll to 2nd section on here for an example (You'll need to view it on iOS and another device to see the difference.)
It's happening with a range of fonts, but mostly Canela and Red Hat Display.
I have a fairly basic knowledge of HTML and CSS so am not sure even how to start fixing it - but I can add CSS code to the builder if someone can help by finding a solution?
Thanks so much!
Safari applies my styles normally on page load for any size. However, it won't apply desktop styles if the window has been sized for mobile since at any point since the last reload.
To most easily see/trigger the behavior, open the site in Safari 13 at desktop size and see the desired layout (most notable here is the navigation bar). Resize the browser down to mobile layout (be sure the navigation switches to hamburger mode), then back up to the desktop layout. (You may also load the site at mobile first, then simply widen the window.)
See test case here: https://www.davincilabs.com/
Normal behavior (as on load):
After browser resize (Safari 13 only):
If you inspect menu elements, you will see that styles-l.css and navigation-desktop.css apply. After resizing up, the style sheets no longer apply.
IMPORTANT: This does not appear to be a JavaScript problem! The behavior still occurs if you disable JavaScript from the develop menu.
To recap:
Found in Safari 13 ONLY. Earlier versions of Safari that we have tested so far do not experience this. Other browsers tested (Chrome, Firefox, Edge) do not experience this.
I have only experienced on desktop. This might affect phones as well but it's impossible to reproduce with my test case; I'm not using any breakpoints small enough.
Initial page load is always correct
Issue triggers when window is enlarged greater than the mobile breakpoint
Safari appears to be no longer applying an entire loaded style sheet file (styles-l.css) to the page layout
Occurs even with JavaScript shut off
This must be fairly rare as I can't find other occurrences after a lot of searching, but it's affecting multiple sites I am working on. Finally, if you cause Safari to reconsider CSS rules in the inspector, (such as by manually editing the parameters of a media query,) Safari will instantly redraw the page correctly.
I had the same problem.
I don't know why but I have this problem just with the store on Magento 2 and with Safari 13. (Also others big e-commerce like The Protein Works, Bulk Powders, sigmabeauty ecc)
I fixed it with macOS Catalina 10.15.7 and Safari 14.
I have made a collaborative writing website called Fablelane (https://www.fablelane.com).
It runs with a somewhat responsive layout (except it looks bad in mobile, but that is what I am working on). Now, if I visit the site in IE 10 mobile from my Nokia Lumia 920, I can pan about 20 pixels to the right.
I am pretty sure that I don't have any weird paddings anywhere and anything that creates unnecessary spacing. I also have the view port meta tag set correctly, and I have made everything box sized.
What am I doing wrong? The issue is hard to pinpoint for me since I don't have access to other smartphones than Windows Phones, and because it's not within my budget to buy things like BrowserStack. I haven't had luck setting up the local emulator to find my ASP .NET MVC localhost site either.
Can anyone help?
Perhaps there is an overflow issue. Maybe try popping:
overflow:hidden;
into your css to see if that makes a difference or not.
I have encountered the strangest problem I have ever encountered in my web development career, and I just cannot seem to solve it.
I developed a website: www.ktngroup.co.uk a few months back, all worked perfectly upon launch across all devices. Now it would seem as though the site has developed some form of issue limited only to ipad. The strange thing is, I cannot replicate it when using css user agents and screen sizes, which is strange becuase it looks like a css problem.
I cannot describe the issue very well, but it looks as though all the content (Except the header) is pulled off the site on ipad/not displayed. Also, when using adobe edge inspect; I see that none of my css rules are being applied to the elements.
Comparing the desktop version at 1024px vs the ipad landscape is the best way to discover the issue.
UPDATE: When I cancel the iPad fully loading the site (roughly the first two panels) the site functions perfects on those two panels – almost as if its loading something further down that breaks the site?
If anyone has any guidance, I truly could not thank you enough.
For those who may encounter the issue – it's what Jack Pattishall suggested. The iPad didn't seem to respect vh as a unit, and as a result my images were huge.
To fix this I added a media query to handle the handheld tablets with a set pixel width/height.
Hopefully this can be of use to someone
so I have a site that's not nearly done yet (eklinik), and its breaking on the iPad (iOS in general actually)... Things like the footer doesn't stay fixed, there's extra padding to the right, a div that's supposed to be a 100% width/height isn't, and so on so forth...
Now, I'm not asking someone else to clean up my mess (despite how nice of a thing that would be), but I am asking how can I start troubleshooting the website on the iPad...? For desktop browsers, I can always bring up the dev tools and see what's breaking where...
I do not own a mac based system, I do have an iPad though... The Dev console in the iPad is only looking for JS errors (mostly) and doesn't show anything...
Any suggestions will help... Thanks...
PS. The site is only going to run on the latest browsers:
Chrome 12+
Firefox 4+
Opera - 11+
IE 9+ (barely)
Safari 5+
If you do feel generous, and do want to point out mistakes (optional) I might have made, along with possible solutions (optionally optional), then feel free to drop me a line - abhishek#live.com.my... :-)
The question's old, but a good solution for this has come up:
Adobe Shadow
I've had quite a few clients recently that wanted their sites to be "mobile compatible" and the best solution for checking code/css on iPad is Firebug Lite:
http://getfirebug.com/firebuglite
I believe you can upload and include the javascript in your site and then automatically turn it on using a simple attribute in the html tag ( see their docs for more info).
You can also install the bookmarklet in your iPad bookmarks using this method here:
http://osxdaily.com/2011/12/02/run-firebug-on-ipad-or-iphone/
I use it using the bookmarklet method and it works. Unfortunately it is a little hard to navigate, because it doesn't handle the touch controls very well (it has trouble distinguishing between a 'hover' and a 'click), but it's better than nothing.
Regarding your actual problem, it sounds similar to an issue I recently had on one of my sites. Did you set your viewport tag? if your site is normally 960px wide, and you have a div that is using width:100%, it will look wrong on the iPad because the window on the iPad is technically only like 600px wide. So the browser thinks width:100% is 600px instead of 960px or larger. If you set the viewport to 960px, then iPad Safari says, "oh, my browser window should be 960px (instead of 600px)," and resizes accordingly.
Hope that helps!
I use weinre to test on mobile devices, not just iPads, and it works wonders.
If you carefully test in your PC with chrome and safari as well until you get consistent results I would expect iPad or Android tablet to render "nearly" the same...
About javascript errors you should of course avoid and fix them, are you using jQuery or any other intrinsically cross browser js framework? if not, you should! :)