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.
Related
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 {}
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
When I view my page in IE10 w/compat. mode (IE7 Standards) the page renders certain elements incorrectly. However, when I go to inspect the elements with Developer Tools (F12) and change anything, all of a sudden, the elements are rendered correctly.
Anyone ever seen anything like this before? If so, how did you fix it? It is maddening trying to troubleshoot, while not being able to touch anything.
Same thing here, IE10 dev. tools make certain CSS styles completely dissapear!
I noticed that with class-name "top" loosing its definition.
Funny is when I renamed it to class="topbar" my problem was solved.
I am writing some CSS files, but when I make a mistake, Chrome appears to just silently ignore the parts that I screw up, and renders the rest.
This makes it annoying to debug since I can't figure out what is going wrong.
So, is there a way to get Chrome to "scream at me in big red letters," so that I can spend less time finding the error and more time fixing it?
While you can not "debug" CSS, because it is not a scripting language, you can utilize the Chrome DevTools Elements panel to inspect an element & view the Styles pane on the right. This will give you insights as to the styles being overridden or ignored (line threw). The Styles pane is also useful because of it's ability to LiveEdit the document being inspected, which may help you iron out the issues. If the styles are being overridden, you can then view the Computed Style pane to see the CSS that is actually being utilized to style your document.
To bring up the Chrome DevTools window, hit Ctrl+Shift+I in a Chrome browser tab. (Command+Opt+I for a mac)
For more info visit https://developer.chrome.com/devtools/index
As CSS is not a scripting language, you cant properly debug it. Anyway if you know where it goes wrong you can try to tune it by hand.
Aditionally you've got the w3c validator here: http://jigsaw.w3.org/css-validator/ which may give you some feedback
I'm trying to learn CSS. I've taken great pains to get everything right. My pages all validate and they look correct on Firefox and mostly correct on Chrome. However IE is all over the place. In relation to Firefox, the following is wrong in IE (in order of importance):
the main body box is pushed below where the left boxes end
the upper-right drop-down stuff (mouse over "Settings") is totally off in the weeds (it's off in Chrome also but in a different way)
"Recipes" tab is supposed to have no visible bottom border
search button is askew in relation to search box
logged out version: the upper-right login elements are askew
Logged in,
Logged out,
CSS,
Links, functionality, etc. are not guaranteed to work on these pages. It's just static snapshots to show layout.
Can anyone point me in the right direction for whatever I'm doing wrong?
You need to Reset your CSS (Dean, above recommends Eric Meyer's Reset CSS). I prefer Yui Reset CSS (I actually like their own Reset / Fonts / Grids CSS). As part of doing this you also need to use Standards Mode.
Finally, you need to be aware that some things will differ in browsers no matter what. So if you run into this situation, it's either work around it, or live with it.
What version of IE are you running? Sounds like most of your issues may be caused by the IE Box Model Bug.
I never start a new website design in css without putting Eric Meyer's Reset CSS in first.
It resets all the differences in all the browsers, so that you've got a even playing field to start from.
From there-out, everything should be the same in all browsers.