We have been using GWT for our product, We are finding difficulty resolving browser compatibility issues. Firefox displays screens properly, but specifically, some screens are too much wide, spreads across the whole chrome browser. Why so in chrome?
We tried removing some components, like some grids. thought it was responsible for these things. Nothing worked. Did Anyone face the same issue?
Related
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 am working on a web application, and I am facing a lot of issues when zooming
Here is a blueprint of the architecture of the page :
lately the client asked us to make the application adjustable with different resolutions, the original one is : (1280*1024), now We have added some media queries so it will fit in (1600*900) & (1920*1080), currently the application is working fine in these resolutions, but we are facing one problem which is triggered when the user zooms in or out, the page becomes messed up.
I have looked online, and I've found that I need to wrap the header and content in one single div, and assigning margin : 0 auto; with a max-width & max-height..., I did that but I still have the same issue.
Apparently the problem disappears when I use the emulator in Internet Explorer and I precise the resolution such us Below the application is working fine when zooming, but when the Emulator is on default mode the problem occurs.
The application is very old and it's working only in IE11 compatibility mode.
So my question is, how to fix the size of the page in different resolutions without modifying the emulator?
The application works fine when you use the Emulator because you define the resolution for it and the resolution won't change when zooming in this situation.
But zoom itself is a behavior which will make the browser behave as different devices and will definitely change the resolution, so the appearance will be different.
I think you just need to make media query with the commonly used resolutions. For more information, you could refer to this thread.
Just started doing some cross-browser testing for my website and there's some weird things happing with my home page in Firefox.
The slider looks to be smaller than the thumbnails below it, the thumbnails are touching each other, and when you resize your browser, the thumbnails don't scale down (they just overlap more). If you look at the site in Chrome, Safari, or Opera (even chrome/safari on iOS), the slider's width is the same as the thumbnails below, there's space between thumbnails, and everything scales properly when resizing the browser.
I'm also noticing some lagging when I hover over the thumbnail (CSS3 animation), again only when I'm in Firefox.
What gives? What am I doing wrong, or does Firefox get goofy with responsive sites? If it matters, I'm using this framework
EDIT: Also, if you click on any of the thumbnails, it seems like the images on THOSE pages look fine and scale properly. Seems like just the home page is affected.
Welcome to the frustrating world of web development. Every browser interprets code differently, THAT is the number one challenge of our industry. Even the same browser foundation interprets differently from version to version. Internet Explorer HAS ALWAYS been the worst browser to design for because it is usually 2-3 iterations behind everyone else. AND you HAVE to worry about IE, because it ships with most PCs, it is the most prevalent browser.
So, you have to think about who your audience is, and design on the platform most appropriate for that platform. For example, if your audience is graphic designers, you are safe to develop for modern browsers. But if your audience is the casual, not-to-techie PC user, you have to tailor your designs for IE. (sorry).
You can use a tool like http://browsershots.org/ during development to see how your site is performing in a wide variety of browsers. Or https://browserlab.adobe.com/en-us/index.html#
You then have to learn about the "hacks" to make your site display similar, regardless of the web platform. THAT is an immense subject area and you will have to learn and do research until you understand it.
BUT ALL OF THAT BEING SAID, THE MOST IMPORTANT DESIGN PROBLEM TODAY IS MAKING A RESPONSIVE WEBSITE THAT ADAPTS TO BOTH LARGER AND SMALLER SCREEN SITES.
Mobile is the new black. Going forward you should ALWAYS develop with mobile in mind, unless you KNOW that your audience is NOT the mobile-type, and that is the exception, rather than the rule.
Added max-width="100%" height="auto" width="100%" into my img tags for the thumbnails and it seems to be working
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
I am very new to web designing and my site is almost about to be live. http://cloudchowk.com/future/
But I have some serious issues found at the very last moment. When my site is zoomed in or out, the contents are being misaligned at some certain percentage of zoom.
Also my footer gets misaligned to its left when viewed normally in iPad and iPhone.
I think firebug and chrome inspector will help you if you need my code because I don't know what code to insert here specifically.
Any help is much appreciated.
You can't do that for all possible browsers / devices.
There is no programmatic way to lock your site so that no browser will be able to zoom it.