We've been having an odd issue that I'm not sure how to tackle, and I think this may be related to a recent Google Chrome update, but I'd like some way of sanity checking myself before I open an issue on the bug tracker.
Problem
We have an internal web application that our users use Google Chrome to access. Starting sometime early last week, we've noticed that when users middle click links, one or more of our stylesheets gets unapplied to the page.
Weirdly enough, zooming in / out or opening Chrome's Devtools re-applies these stylesheets to the page. If you open the sources tab in the Devtools and watch the stylesheets that are loaded, when the layout is working, we're seeing the full list of stylesheets. When a user middle clicks on a link, the stylesheets area flashes and the CSS file is missing from the list. Zooming in / out re-adds the missing CSS file to that sources list and renders the page correctly.
Before Middle Click
After Middle Click
Troubleshooting
Thinking this was some JavaScript function doing this, I watched the elements to make sure there weren't any changes to the DOM (thinking we may be adding a class to our wrapper elements on accident). No DOM changes that I can see, and I'm not seeing inline styles applied to HTML elements.
Figuring that the previous step wasn't enough, I removed all the JavaScript on the page trying to narrow down what file is doing this. After removing all JS from the page, we're still seeing the same thing. Someone middle clicks a link, then the page's styles go crazy.
I double checked it in Incognito mode, figuring it was one of my extensions. It still happens in Incognito mode.
Thinking our Stylus compiler was going nuts, I double checked the stylesheets for any invalid CSS and couldn't find any. I removed the source maps from all our stylesheets thinking it may be related to that, but it didn't fix the issue either.
I've also checked for the stylesheet being affected having a disabled attribute set on it, but that doesn't seem to be happening.
Wrapup
All in all, I'm not sure what's causing this outside of a browser bug. This is something that had popped up late last week which coincides with the last upgrade of Google Chrome, which hints to me that this probably relates to that update.
That being said I've not seen this issue affect other websites, which also points to the website being the issue so I'm not sure.
Is there any other way I can narrow this down to being a Chrome issue? I've not had this happen on any other browsers I've tested. (Working on putting together a MVP of the issue that's happening now.)
Your problem sounds similar to this.
Chrome Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=647151
Should be fixed shortly.
Related
I've always used ff inspector to debug css and never had this issue before, I tried to check the css of this website https://www.duolingo.com (the issue occurs only when I'm logged in), but the inspector is not showing anything for any element on the webpage:
The inspector works fine on other websites though, not sure if the website developers intended to hide the css or not, but I found some strange css links seems to be using a proxy:
Is this some kind of new trick to hide CSS or is it a bug in firefox inspector? or is it something else?
I'm using Firefox version 45.0.1
I am pretty certain this is a known bug that has been fixed already.
I don't have an account on this website so I can't be sure, but we've had very similar problems in the recent past.
It could be either:
https://bugzilla.mozilla.org/show_bug.cgi?id=1255787
Which has been fixed in FF48 (it involved an inline stylesheet <style> which defined a sourcemap URL).
Or it could be:
https://bugzilla.mozilla.org/show_bug.cgi?id=1249888
Which has been fixed in FF47 and uplifted to FF46 too (it involved an incorrect CSS sourcemap URL).
You can verify this by tested again with these versions. If it still doesn't work, please feel free to file a new bug here: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector with steps to reproduce and possibly, pasting the errors that may be present in the browser console (ctrl+shift+J).
In any case, this isn't a wanted behavior. In the rare cases where there are indeed no css rules to be shown on a given element, then the panel shows a message like "no valid element selected" or "no css rules found", I can't remember exactly which one. If the panel is just empty, then that's most definitely a bug.
I have seen this in Firefox 49 when inspecting my own site on the development server. When I went to the Style Editor tab the list was huge and the spinner keeps spinning.
I went to the dev tools settings and disabled "show original sources". The Style Editor tab now shows two files and I'm able to see the CSS rules (though not my less rules obviously).
I've found this already filed as https://bugzilla.mozilla.org/show_bug.cgi?id=1097834
I have a website in wordpress. I recently download a plugin called Advanced Ajax Page Loader. It refreshes you content when clicked on other page without refreshing the whole site(header, footer). I tried to get my answer from plugins developer and wordpress support forum, but none responded.
I read that if ajax jquery call is used then all scripts should be reloaded again, for that the plugin have a place where I should put those codes. Until that everything works correctly, except one thin. When I go from a category to category, everything works fine, but when I open a single Post it completely screws up all my css for that page, when I refresh it, everything looks fine but then again, if I open one of the big categories with many posts, then that pages css is messed up.
I though that I could somehow refresh whole css by putting some code in the "Reload code" box, but I have no idea how to do that using scripts. English isn't my native language, therefore I'm having difficulty finding my answer on google, I tried, but my vocabulary is limited. How can I do it?
are you adding CSS classes to your elements via Javascript? If so, then the styles you add will only affect those elements which are part of the DOM at that point in time, so you might be experiencing a race condition, that actually happens to work in Chrome and Safari, but not Firefox.
second try to validate your markup and CSS and see if you have any error in your css syntax ?
Please see this link. Notice that the search bar first renders near the top of screen. Then aligns itself to be opposite to the logo. I think some css rules are causing this but I am unable to figure out. Can you please help me in pinpointing the reason. What one should avoid in the code to avoid/minimize this behaviour.
This almost aways happens when you have a css rule for blocking that is overwriting the previous. The best thing to do is to have the first thing in the css file to be blocking and normalizing. Every time you need something to be in a place or have a specific size, you should go to the blocking section of your code.
But the most preocupying part of the site you shown is the time it takes to load a fancybox css file.
This issue could just be how each browser loads and renders the content, and also on how fast your network can download content. Since there is many multiple Javascript and CSS files it can just be parsing them slowly and configuring the site as it goes while your network and browser is still downloading and loading everything.
I viewed it in Chrome and Firefox and it seemed to load fine for me.
We have a WordPress website which loads sufficiently in every browser I've tried, except for IE. For some reason in IE, it seems to freeze the browser for a few seconds every single time the page is loaded, doubly so if it has to load a page with an iframe of another page. The user has to wait awhile before they can interact with anything on the page.
Here's the site.
Someone suggested we could use WP Supercache to solve the issue, but I've had problems with this plugin in the past and am reluctant to rely on it, especially since this seems to be only a problem in IE.
What is the best way I can troubleshoot this issue? How do I find out which scripts in the header, or footer, etc. is causing it? Is there a quick way to do so, or do I just need to start eliminating variables within the theme?
I'd don't quite understand why but in IE9 style.css is being pushed right down the page load order - see request #35 http://www.webpagetest.org/result/130327_Y9_f1d5796658d8475b68e2e537644173f1/1/details/
As a browser won't render until it's downloaded the applicable CSS this blocks rendering.
Chrome on the other hand prioritises downloads so that resources that can block rendering are downloaded ahead of images.
Here's a side-by-side video of the two loading experiences.
(If you want help looking at this further my contact details are in my profile)
Thanks to this thread I just found, the answer appears to be fancybox: Fancybox causing slow load times in IE?
Specifically, the IE-specific filters in the CSS file for fancybox. I removed those filter styles, and it loads fine now.
Sorry, I don't seem to be able to give just a comment. Anyway, in Opera 12.14 it works fine. And in Explorer (8) it works just as well, no errors in the console. Just my .1 cent.
For some reason whenever I go to the page of my website that has the crystal report on it my main navigation bar disappears. Here is what the header for the site (with the navigation menu) is suppose to look like:
and here is what it looks like when there is a report on the page:
Could someone tell me what is causing this and how I can fix it?
I'm using master page for the header by the way.
Greener, the Crystal Report viewer is a dynamic HTML representation of the report. It combines JavaScript, HTML and CSS (duh, what doesn't) to represent your report on the webpage. The toolbars are powered by JavaScript calls to .JS that is linked in when the CrystalReportViewer control is rendered to your page.
My point is, all of this introduces a LOT of stuff that can conflict with your existing page. In particular JavaScript errors can occur (which can cause certain things to stop rendering) OR CSS the report uses happens to apply styles you never intended to have applied to objects in your page.
I highly recommend installing the Web Developer toolbar and/or FireBug to FireFox, IE, or whatever browser they are offered on these days. FireFox's implementation of those is quite good in my experience.
When the page loads you can use the 'CSS' menu of the Web Developer toolbar to actually disable some or ALL the styles applied to the page. If disabling Crystal related styles (or all) makes your missing toolbar appear, then it's probably a conflict in your CSS. A front end developer would know to adjust the styles (i.e. add the !important directive to a style, change class/id names, etc.) to address this.
Alternatively, FireBug may be reporting JavaScript errors (heck, even FireFox can show these in the console) which could indicate a problem that prevents the completion of rendering your toolbar.
An outside possibility is that the report itself contains mark-up. For example, if you had certain fields in the report contain HTML that happened to be rendered by the browser, this could create an open div tag, css styles and even JavaScript that would do all the stuff I explained above.
I hope this narrows it down for you. Happy troubleshooting!
I was having the same issue and after hours of searching I finally resolved it... check this out... http://scn.sap.com/thread/1926659
In the crystalreportviewer css file, I adjusted the div class = clear and changed the height attribute and disabled overflow:hidden. Hopefully, that works for you. Good luck!
I found the solution after searching on the web and is a quite simple.
On the Site Master, change the Name for all the places you have the style "clear" for example "clear1" and change it too en the site.css with that name.
The problem is for the conflic with the namespaces with Crystal Report css.
Hope this help.