I am using highstocks to chart a graph in a page within a tab(jQuery tabs) and in the Internet Explorer the period scroll bar(the one right below the graph where you can change the time span being charted) doesn't work.
Graph example working well:
http://jsfiddle.net/hnkbh/
Same graph, but using jQuery tabs:
http://jsfiddle.net/zFRYJ/29/
The strange thing is, in Chrome and Firefox it has no problem at all.
Did anyone encounter with a similar problem?
Thank you.
commenting out the following line in the jQuery UI theme:
.ui-widget :active { outline: none; }
Works! http://jsfiddle.net/zFRYJ/40/
Via:
https://github.com/highslide-software/highcharts.com/issues/330
Related
the css code posted below seems to work fine in internet explorer and google chrome but when in safari the a:hover effect seems to only apply when i right click the element or when I go into inspect elements and click hover from the options for that a tag in the right sidebar. I believe that this problem may be due to http headers as I can see no problem in the source code. The url in question is available here
and the css code in question is:
#swag a:hover {
color: black;
}
and the html is the following:
<p>Mouse over and click the link:
<div id="swag">
example.com
</div>
</p>
A full reboot of my macbook has solved my issue. The nature of the issue is still unknown to me.
I just created an Arabic version a website and noticed that Chrome sometimes shows a totally blank page until the window is resized and then everything instantly becomes visible.
Arabic is a RTL language, so the <html> tag has dir="rtl" lang="ar" added to it. This is the only difference between it and the English site.
This is the site. You may have to click the logo a few times in order to see it show blank.
I've noticed this problem too and I searched the internet in English and Arabic but couldn't find the cause of the problem. I found a workaround to fix it though; use the following jQuery script in your rtl-directed webpages:
//Chrome RTL UI Issue Fix
$(document).ready(function(){
$(window).load(function() {
$( "body" ).animate({
scrollTop: 1
});
});
});
All it does is that it scrolls the page by only 1px right after all the page elements have been loaded. You can add a code that scrolls it back if you want.
I fixed this problem and I want to share it with you.I think this problem is only for gc on mac os.
How to fix it?its really easy.
hide you body in your css and then show it when page load and every thing will work.
/*Add this to your css to hide body */
body {
display: none;
}
<!-- Add to your html to js file to show your body again -->
$(window).load(function() {
// When the page has loaded
$("body").show()
});
The link to the page does not work. Is the page available on the futurism site?
I downloaded the futurism.com page and added dir="rtl" lang="ar" to the html tag. I have reloaded the page 50 times. I cannot reproduce the problem.
My copy of the page is running on Apache with Multiviews.
I have added a language directive for Arabic.
I have two copies of the file, futurism.htm.en and futurism.htm.ar
I have set the language in my browser to Arabic [ar].
The Arabic pages is negotiated by Apache.
The page loads without a problem.
I have also created another page with Unicode Arabic letters. It loads and displays the Arabic right-to-left without a problem.
I had the same problem.
Just don't apply direction to the body or html tags.
<html>
<head>
<style>
.rtl {
direction: rtl;
}
</style>
</head>
<body>
<div class="rtl">
<!-- Your Codes Here ... -->
</div>
</body>
</html>
I had a similar problem to yours but my site showed fine until it was manually refreshed on Android phones, after which the page would go blank. This behaviour could also be reproduced in developer tools on Chrome and Opera (both use the Blink engine).
First, I applied a fixed positioning rule to the body,
body { position: fixed; }
Then, I reverted the positioning on page load using jQuery,
jQuery(window).load(function() {
jQuery('body').css('position','static');
});
Wordpress became really annoying when working on RTL, you need to resize or scroll to show content. I think it is only happening on MacOS.
I've noticed that some websites don't have this issue, so comparing the html I noticed that the working websites have many class in the <html>, like: js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation...
which added by modernizr.js (v2.8.3)
I added this to my page header, and the blank page issue disappeared:
<script src="/js/modernizr.js"></script>
I am not sure what is going on, but may be it will give some starting point to figure out the real cause of the issue.
I have this issue with my Wordpress and I fixed it by adding this javascript code
window.scrollTo(0, 1);
window.scrollTo(0, 0);
I'm having this sort of issue with the Twitter button on my webpage. In Firefox Developer Edition, the background of my webpage causes the button to render incorrectly.
example:
#container
{
background-color: #f0f1f4
}
causes the text within the button to render white.
Here's how it looks:
What's up with that?
EDIT
This is a bug in Firefox Developer Edition, and does not carry over to the official Firefox release. A bug report has already been filed: Firefox Bug #1112240
The text on Twitter button takes the color of your container, so it is #f0f1f4.
You need to specify in style sheet its own color:
a.twitter-share-button {
color: #333;
}
I hope it helps, please read more documentation there:
https://dev.twitter.com/web/overview/css
I'm working on my new online portfolio at http://asbjorn.org/ny/, and I've come across the weirdest issue!
Every time you open the page for the first time, the next and previous buttons for the slideshow don't appear. If I open the inspector, they pop up immediately, and they also appear when reloading the page.
They're pretty standard html elements, not added dynamically, so I have NO clue as to why this happens! Of course I can't have the site visitors reload the page just to see them. :/
I really hope someone can help me! :)
update: seems like it's a chrome only issue. For me it happens consistently in chrome on both Win7 and OSX. A few of my friends also has the same issue (probably in chrome on osx)
So I'll take a stab at an answer. When I see the problem in Chrome 22, and I bring up the inspector, I note that the #previousLink and #nextLink divs have a width of 0 in the broken state. Try setting an explicit width for these in your CSS, or make the nested image use display: block.
#previousLink { width: 31px; }
#nextLink { width: 37px; }
or
#previousLink img,
#nextLink img { display: block; }
I think the combination of these inline items and your overflow: hidden rule are biting you. I think. This is a tricky bug!
I have some nav elements positioned with transform: rotate() and box-shadow. When you hover them they 'pop out' a little bit to indicate you can click on them. In Chrome and Safari (indicating this is a webkit issue) when you hover some of the nav items the box shadows go haywire and cover up portions of other random elements. It works fine in Firefox.
I made a jsfiddle portraying the issue as simply as I could figure out how to:
http://jsfiddle.net/Q39eJ/1/
Hover over and then out of the first one or 2 elements and you'll see the issue in action.
The site I'm working on has the issue here:
http://temp.go-for-english.com/
(URL will soon change to http://www.go-for-english.com if this one doesn't work)
If anyone can figure out a work-around that still utilizes CSS3 to make it look normal (Maybe set the z-index again on the hovers, or some other weird workaround that I'm not sure about) I'd greatly appreciate it :) I'd really rather not resort to images :(
UPDATE:
I've been informed it looks fine on Windows Chrome =\ I'm using Mac OSX 10.6, here's a screenshot of the behavior I see:
http://s9.photobucket.com/albums/a74/nZifnab/?action=view¤t=Screenshot2012-01-19at13205PM.png
My client has also pointed out the issue because they use Safari.
I figured out a bit of a work-around that mostly works. Found this stackoverflow question: How can I force WebKit to redraw/repaint to propagate style changes? related to forcing a repaint of elements using javascript. So I updated my fiddle with this code to force a repaint of the elements with box shadows:
$(function() {
$('.top-nav a').hover(function() {
redrawMe($('.top-nav a'));
})
});
function redrawMe(obj) {
obj.hide();
obj.each(function() {
this.offsetHeight;
});
obj.show();
}
I tried only redrawing the element that was being hovered redrawMe($(this)); but it didn't work, when any of them gets hovered, I need to redraw all of them. Appears to mostly do the trick but there's still some darker shadows that appear in the cracks between each element. I feel that this is acceptable and barely noticeable. jsfiddle with my proof of concept:
http://jsfiddle.net/nzifnab/Q39eJ/4/
Haven't updated that live site with it yet, but shall soon.
If anyone can manage to find a way to make even the shadows between each element disappear I'll accept your answer instead :)
Again, this may only be happening on MacOS X in both chrome, and safari.