I'm working on a web page design and Chrome is wigging out when I change a stylesheet. I'm trying to switch between light and dark themes.
I have this <link> to start:
<link rel="stylesheet" href="/css/dark.css" id="theme">
To change the theme, I'm doing this:
$('#theme').attr('href', "/css/light.css");
I have code to actually toggle (loads dark if light is loaded, and vice-versa). Whenever the stylesheet of the non-default theme is loaded, it likely -- but not always -- glitches after I move my mouse around. For instance, after I first toggle the theme to the light theme:
It actually does repaint the full page with the theme for a split second, but then it turns the screen black (but it does not revert back to the dark theme, as the dark theme is not black; it actually has a dark gradient).
When I move the mouse around some more:
The white area expands in blocks over where my mouse is moved, until I move it over most of the page it goes back to what I expect. Or, I can resize the window and Chrome fully repaints the page as expected.
Removing the fancy tooltip doesn't fix the problem:
I've tried invoking a window resize event. I've tried using jQuery to show/hide the html and body tags to try to trigger a repaint. I've also tried deleting the theme's <link> tag entirely and adding a whole new one to the DOM. Alas, I see the same effect.
Firefox and Safari don't behave this way. But I absolutely have to get this working on Chrome. Any ideas?
Update (March 2014): This page is part of the web UI of GoConvey. It still renders fine in Firefox, and the glitching in Chrome at this point is less frequent and slightly different in its nature, but it's still there. Anyone is welcome to take a look if you are feeling generous.
Wow. Here's the CSS hack to fix it:
-webkit-transform: translate3d(0, 0, 0);
This forces Chrome to use the GPU to render the element. I no longer see the glitching.
Update about a month later: Okay, well, I've continued to develop this web app and now the glitching is back. Still trying to work around it. Now sometimes the whole viewport goes blank and I have to resize the Chrome window in order to get it to re-appear.
If anyone would like to try this and see the glitch live, the page is GoConvey's web UI (Chrome on Mac).
Related
I have a site (http://www.iproconnect.com.au/) that for one user (that I know of) renders the home page with black areas in Firefox. These do not seem to be tied to CSS, as if I force a re-draw of an affected area (e.g. by scrolling areas in and out of the viewport) it sometimes renders correctly, and sometimes incorrectly but differently to the previous incorrectly. Also if I do this with the inspector open, no CSS seems to change, and hovering background URLs show the image downloaded correctly.
I can't reproduce this in other installations of Firefox (all running the same version - fully up to date). And this user has un-installed and re-installed with no change in behavior.
I don't even know how to debug this further, let alone how to solve. Any ideas greatly appreciated.
The HTML and CSS are rather large so I can't pinpoint the issue or post a good example. When I toggle through my UI, the css styling seems to break, the most jarring of which is that the background changes to grey. I was wondering if anyone encountered similar issues. Here are some of the conditions for me.
-Chrome: Firefox & Safari working fine
-Small Screen: Problem doesn't occur on larger monitors
-Toggling developer console on and off fixes the issue
It's difficult to try and pinpoint the issue without seeing some code or even a fiddle, but when you open the inspector the page is resizing, and so redrawing (at least some of) the elements. It's also possible that there's a cache issue - I believe by default when you open the inspector the cache is disabled and so all css and scripts are downloaded again. That said, if you aren't refreshing the page it with the inspector open its unlikely to be that.
My money would be on the window effectively resizing when you open the inspector, and so some (if not all) elements are forced the redraw and thus re-evelauate their styles.
Maybe you could use Chrome's timeline to check what is being painted as time goes by. Try running that and opening the inspector while its active to try and see whats going on.
Looks like a long standing bug (years) with webkit:
How can I force WebKit to redraw/repaint to propagate style changes?
The solution that appeals to me is:
$('#body').hide().show(0); from Force DOM redraw/refresh on Chrome/Mac
to force a redraw.
First of all, let me explain what I mean by "smooth scrolling" here. When I rotate the mouse wheel by one "step", e.g. on Google Search results page, the page gradually moves up/down - the transition from the "before scroll" to "after scroll" states takes some time and is nicely animated. However, whenever I create a long page in html and try to scroll just one "step", there is no animation or transition on scroll - the page just instantly jumps few lines up or down. The average repaint time of my page takes about 5ms, with peaks up to 8ms, so I know repaint time is not the cause of that.
I know that such smooth scrolling can be achieved without any scripting, as for example the site http://www.thecssninja.com/ scrolls super-smooth on Chrome even with js disabled.
Why does Chrome choose not to scroll my page smoothly? How do I achieve smooth scroll without depending on JS, as CSS Ninja manages to?
PS Firefox does not seem to have that issue. How do I tell Chrome with my html/css that I'd like my page to scroll smoothly?
Either you can enable chrome smooth scrolling manually, which does not make sense for website development.
Or you can use some of the libraries to achieve that.
https://github.com/fatlinesofcode/jquery.smoothwheel
Sadly for chrome you cannot enable smooth scrolling through HTML, CSS or JS.
I know you're not after JS solutions, but I've never seen anything guarantee this outside of JavaScript, and karan's link above is certainly the smoothest example I've seen of doing this.
(Proviso: I'm using Chrome for Windows, not Linux. Apparently, that may make a difference.)
I use Chrome myself, and I always get the pages scrolling in jumps, not smoothly--even the pages you described as 'smooth' above step for me several lines at a time, including the Google results page. There used to be a flag available for this in Chrome, which allowed you to turn on smooth scrolling -- it could be accessed through Chrome's flags (go to chrome://flags/ to see those that are available) -- but it's now only available for the Linux Chrome platform. It may be available again in the future, but for now at least, it isn't. Hopefully, though, these experimental features will eventually find their way into Chrome, and render this whole issue obsolete.
Firefox, on the other hand, scrolls in nice smooth steps no matter what page I'm on--including my own local info pages which have almost no styling at all. IE scrolls smoothly, though not nearly as nicely as Firefox, while Opera behaves like Chrome, and steps through the pages several lines at a time.
I'm pretty sure that this is an issue to do with the browser, and not something that you can currently remedy with styling alone. Sorry I couldn't be of more help, but if you're doing this for a client, at least you'll be able to explain the issue.
I would highly recommend finding an alternate solution, but I have managed to find a solution to this exact problem for one of my websites. Akin to just using glitter glue to solve a leak in a wall, I discovered that including an iframe for a Google map on the page (even if it's hidden) somehow added in smooth scrolling. I have no idea how it works, but for some bizarre reason it does.
As I said though, I highly recommend not doing this, as its an extra (and sometimes lengthy) request made on each page to include an element most users won't ever see.
I am a web developer for a small company and we recently noticed a strange graphical issue with our website that only appears for users using Google chrome on windows 7 and 8.
The graphical issue occurs when our banner images fade in and fade out, all of the content below the navigation UI flashes white.
This issue is resolved if chrome is run in windows 8 mode though not if hardware acceleration is disabled.
Weirdly enough something else that fixes the bug is opening the developer tools window by inspecting an element, very unusual.
Is there any kind of fix I may have to add to the pages CSS similar to styling specifically for Internet Explorer?
Try to move the following script include right down to the bottom of your page, right above the last </body> tag.
<script type="text/javascript" src="http://ecogrid.co.uk/js/magentothem/bannersequence/jquery.sequence-min.js"></script>
It works for me, at least in the browser. I think the issue was related to the order of the code and perhaps the conflicting of jquery fade effects in the menu and the sequential slider.
This is non related but... good practice. Whilst your at it you may want to move many other 'render blocking elements' down below the fold as well, this is better for load time optimization. But of course for more info see: https://developers.google.com/speed/docs/insights/BlockingJS
Working on an image heavy website, discovered a strange bug(?) in Firefox. Any CSS background properties are rendered onto transparent png's. It occurs after the initial render, during the cache refresh. This appears as a flicker if you're using broadband but becomes extremely noticeable as you scale down bandwidth.
General progression of the issue seems to be:
Page and images rendered from cache
Firefox removes the cached images.
Firefox begins to reload images but displays a box with the CSS properties of the background.
I've recreated a (hideously colorful) example, but you may need to use fiddler, or another program with bandwidth throttling/emulation to see anything more than a flicker. Obviously, you'll also have to load once and then refresh to experience the error. And again, it's only in Firefox.
I have tried a plethora of various suggestions, none worked. Just need a fix, hacks will work as long as they don't effect other browsers.
EDIT: Here's a video so you can see it in action.
Since I cannot recreate the issue on my Firefox (10.0.2) on my computer (Win 7) with my particular hardware (which may or may not be a part of this problem), I offer the following as a guess at a solution, though one I would have assumed you tried already.
Target your img tags (preferably with some css more specific than below) that you have the issue with and try setting one of the following:
Either:
img {background-color: transparent;}
Or:
img {background-color: transparent !important;}
Update: Another Possible Workaround
Have javascript make the relevant img tags invisible to start and also bind an event to them so that when they load, they become visible again (JQuery example):
$('img').css('visibility', 'hidden'); /*not using "display" keeps layout*/
$('img').bind('load', function() {
$('img').css('visibility', 'visible');
});
I cannot test the above, so no guarantee it will work, but is another idea.