I am building a website but the responsive CSS is not applied on mobile as I would want it to be. I would like my site to be displayed like so (checked by Chrome dev tools):
However, when my site is deployed in production, the site's layout is completely different and it differs between Chrome, Safari and SNS browsers.
For Chrome
For Safari
For SNS browsers (FB Messenger in this case. Slide is different but the styling is practically the same for all)
I've had many problems like this where the design I applied to in Chrome Dev Tools is not applied in real life, and everytime these kind of things happen and so far I just use navigator.useragent to detect the browser type and apply specific css for each type of browser, but I'm sure this is an overkill.
When this happens, is this usually because chrome dev tools is not accurate, or because my logic is weak? And are there any way to remotely inspect DOM elements on mobile (I'm using OSX) so that I can check what exactly is going on?
Thank you!
Each browser renders differently but I think you might have hidden root or body padding or margin I suggest you play with those either through * {} or body {}
Related
I'm developing a website and currently testing it in Google chrome on my PC. I found out that on iPhone devices, the bottom toolbar that is present in Chrome, breaks the layout. I understand how to fix this, but - is there a way to test the layout without a physical iPhone?
in Chrome developer tools, for example, changing to mobile devices only changes the dimensions, it won't add a toolbar functionality.
(If it matters, my issue is having 100vh on pages, I understand how to fix but want to make sure before deploying)
If it's not possible to simulate (doesn't have to be Chrome obviously, could be anything), is there an alternative way to test the behavior when something like a toolbar unexpectedly changes the viewport?
I'm having a PITA issue with a website.
The Safari mac browser (the desktop one, specifically, mobile safari appears to work) is randomly ignoring some of my CSS -- most notably the background color applied to the HTML element. Refresh and it may -- or may not -- go away. Even more perplexing, the browser clearly knows that style is there! I'm using media queries to create a responsive site, and if you change the width enough to trigger a style sheet switch... it suddenly comes back, and everything works properly.
How the heck can I debug this? There's no error output in the console, the same data is getting sent every time (as far as I can tell...), it's not that one of the files is failing to be found (some of the CSS that is being applied is from the same stylesheet as the background...).
I'm at a total loss as to how to even begin debugging this one.
Edit:
If it's helpful, I just noticed that reader mode doesn't work on the refreshes the exhibit the broken behavior, even after the changing width trick fixes the background.
Edit:
This bug apparently also effects the mobile version, but instead of hitting the site-wide css, it's attacking my media-query based layout css.
You could, assuming you have the developer menu enabled, check Develop -> Disable Caches. This sounds like a caching issue.
If you don't have the developer menu enabled, enable it with settings (cmd+,) -> advanced -> show Develop menu in menu bar.
I'm seeing this in Safari 5.7.1 on Windows 7. It looks to me like Safari is actually ignoring commented out CSS. I removed all the comments, and now Safari seems to be behaving. But this is random for me as well, so I am not sure.
This is really odd. I'm not complaining that something works, but it is very surprising ..
On my website I had the usual css :hover for the navigation to reveal sublinks. But on the mobile browsers this needed some js help to make it work (as you can see from those many posts about "css hover not working on mobile browsers")
I made a simple script to fix the hover problem. But today as I was rewriting the code, since I noticed that it was not fully working as intended, I removed the entire mobileDetect.js which was handling the mobile hover. And now it works, without any additional scripts.
I tested it with chrome and safari on my ipad and iphone. It works as intended... did I misse out a big mobile browser update or something?
I use Jquery from google, no framework and standard HTML5.
Here is the site : (easy-sailing.ch) "EVENTS" and "AUSBILDUNG" are the mentioned navigations with sublinks.
I am just wondering if this is some odd anomaly and therefor should put my script back in or just enjoy the good news? :S
as far as i remember it has always been working...
...it is just not needed because there's no cursor and hover happens usually when you click (touch in this case) and you'll leave the page before noticing hover.
on android i can observe it when i touch+slide up or down.
I have fixed this for me by removing :hover selectors/rules at runtime https://github.com/kof/remove-hover
This page says that IE9 and Opera 11.6 support the context-menu cursor on Windows, but I know Chrome, Safari and Firefox do not support the context-menu cursor on Windows, it just shows the regular arrow in those browsers.
I simply cannot understand why they wouldn't support that cursor. It would be immensely useful, especially when it's supported in those browsers on Mac.
It's purpose is for when you want the user to know that you've placed a special function on an element that will be activated when you engage the context-menu trigger over that element. For windows, that's a right-click. (most likely to bring up a custom context-menu)
Obviously, everything has a context menu on the web, you can right click anywhere on a page and the generic context menu will appear. This cursor though, is meant for when you place your own special function on an element that will be activated by right-click(and whatever Macs have - a context-menu key?)
Does anyone know why this isn't supported on Windows by those three browsers, but it is on Mac in those three browsers?
On the "CSS cursor" page of the Mozilla Developer Network you can see:
A context menu is available under the cursor.
In Gecko/Firefox not implemented on Windows, bug 258960 WONTFIX.
On this page you can read more about the bug, e.g.:
In native Windows applications, the cursor for areas with a shortcut menu
has always been identical to the normal cursor. Using a custom cursor will
achieve little apart from annoying people with a non-default normal cursor.
To truly go cross browser / platform, you could use a custom cursor from a image url to display context menu cursor however you'd like.
For example, you apply the following CSS Rule:
cursor: url("https://i.stack.imgur.com/ygtZg.png"), auto;
Which looks like this:
Here's a Demo in jsFiddle
Note: Even if you can solve any cross-platform rendering issues, you might want to consider whether you should use the context-menu cursor. It's is so rarely used that it may confuse users who see it, and context-menus themselves don't translate well to mobile deployments, which'll be a good chunk of most web-users.
Further Reading:
MDN - Cursor Property
CSS Tricks - Using CSS Cursors
I'm unsure which browser is the best for a web development. I know that Firefox is the most favoured for the common but it also does tolerate programming failures, so it is not 100% strict.
With what browser should I develop my website to have the best result on all other browsers, so I don't have to fix too much in the CSS?
From personal experience.
I use chrome. For me 100% fine on chrome is like 70% on IE, so I switch between the two a lot.
Chrome 100% = 98% FF , 99.9% Safari and 70% IE.
This is what I've noticed from my experience.
I personally use Chrome, as its built-in developer tools work great, and it has the widest HTML5 support. However, that's not necessarily a good thing because even if your website works 100% with the better browsers, it will probably break with IE.
If you need your website to work with IE, you should constantly test with it. Use the lowest common denominator.
At this point, all of the major browsers implement a lot of CSS3 features a little differently (box-shadow vs -moz-box-shadow vs -webkit-box-shadow for instance). Honestly, your best bet is to use IE, Opera, Firefox and Chrome (I'm pretty sure Safari and Chrome both run off of webkit, so they should be the same). As for what to use as your primary browser, it all depends on what you're looking for really. I enjoy using Chrome, but others swear by Firefox (I find it too clunky).
Now as for older browser support, well that's just an entirely different discussion ;)
Simple answer, all the major ones.
When you develop for the web it's best to think from the view point of the user viewing the site. The main issue is that each browser will render a webpage a little different and that is the main problem you need to solve.
To help with this issue, you'll need to work with some cross-browser rending web-apps such as http://browsershots.org/
To more directly answer your question, I'd go with Chrome with Firebug. Asides from that, you should be able to create CSS browser-compliant sites with practice.
Good luck!
Develop in the browser of YOUR choice with the best development tools for YOU (e.g. Firebug, FirePHP in FF or the Developer Tools for Chrome). Try to use standard, crossbrowser compatible framworks for JS, CSS and available templates for HTML like "Boilerplate" HTML 5. And then test everything continously on the mainstream browsers (IE, FF, Chrome, Opera, Safari).
This way you won't waste your time afterwards fixing browser specific bugs...
I prefer using Firefox, simply because there are so many useful tools for it - Firebug, Web Developer's Toolbar and so on - but really it doesn't matter as long as it's not Internet Explorer.
This is because IE has so many quirks that it's best to get it right in all other browsers, then worry about adding workarounds or other fixes to make it look right in IE (getting things right in IE can take a very long time).