I am using Bootstrap glyphicons and FontAwesome icons and am experiencing a strange bug where they do not show unless hovered over, at which point they are permanently visible. When I reload the page they aren't visible again.
This only happens in Chrome. Safari and Firefox both show the icons normally.
I am running Chrome v33.0.1750 - this has never happened before.
I found some JavaScript code to re draw the page and works for me. I found this on SO somewhere so it's not my code.
$(document).ready(function()
{
var Offset = $('body').offset();
$('body').offset(Offset);
});
I just figured it out. Turns out there's a conflict with one the jQuery plugins, holder.js - the image placeholder plugin. Removed that and the icons show fine now on reload.
Strange, considering that in Bootstrap's documentation, they use holder.js to generate images for their 'Thumbnails' section.
UPDATE:
It seems there is a conflict between Chrome 33 and any version of holder.js above v1.9.
https://github.com/imsky/holder/issues/81?codekitCB=415695904.557899
Related
I'm using Font Awesome 5 Free via a kit. On desktop, the icons work perfectly. But on mobile (iOS chrome (normal and incognito), iOS firefox focus, iOS safari), they behave like Schrödinger's cats...
On first page load, the icons appear. Tap reload and they disappear and are replaced by small squares. Tap reload again and they reappear. Every other tap of reload shows or hides the icons.
I notice the same behavior if I toggle back and forth between "request desktop site" and "request mobile site". (I'm not sure what's really going on under the hood there since the page renders the same either way.)
Since they do appear correctly, at least part of the time, I don't think it's a cross-origin problem or a caching problem.
An example page is here: https://onlinesafetyzone.com/learn/learning-zone.php
I've read many posts, here and on GitHub and none of the solutions has worked. Anyone have a clue what's going on?
It seems you have somekind of a XSS issue. I would try to download the fontawsome resources and deploy them with the application. Can be that they have a CDN problem, every second time the fonts break :| so maybe one of the nodes is flipping.
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
Developing a plugin for Chrome, I've used data-tooltip for links which require a tooltip. Until 2-3 days ago, everything seemed to be working fine.
Today I've discovered that the tooltip for links inside a modal display behind the modal. Nothing has changed in my code. I even tested with older versions of my app ant it still displays the tooltips behind the modal.
My guess is that Chrome has changed the way it views tooltips. Any idea what I can do to fix it?
Example of tooltip usage:
<div class="choose-platform" data-tooltip="GoogleDrive">
...
</div>
Screenshot of the error I'm facing
On hover of Google Drive Icon, the tooltip appears behind modal
It seems like tooltip is appended in body. Try giving higher z-index than modal box
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).
I'm creating a simple bootstrap 2.3.2 popover on my page and it works perfectly on Chrome and Firefox, but when it comes to IE, the popover style is not showed correctly:
IE screenshot
Here is my code:
(ver detalle)
<div id="popoverContent" class="hide">
<p>110001</p>
</div>
Javascript:
$("#pop").popover({
content: $('#popoverContent').html(),
title: "Detalle"
});
The problem was that internet explorer was running the page in compatibility view mode wich was enabled by default for intranet websites. I solved it by pressing Alt key to show the menu bar and going to Tools>Compatibility View Settings, and unchecking the "Display intranet sites in compatibility view."
You had a pretty simple fix, but if you are using a popover and filling in the title you should be sure that you are not emptying it back out. I know we are using bs tooltips, and I used the popover for some d3.js stuff. Well in Chrome I was getting a popover and tooltip, so I emptied the attribute "title" out. That caused IE to freeze on hover. So I had to check if it was IE and not remove the title. It is a mess, but if someone else is having this issue you are not going to see this one coming.