The circles at the bottom of this site: http://benupham.com should open on click, but do not in IE 9 (and below, but concern is with IE 9). The JS is a modification of the example here. But I'm not even sure it's the js -- it could be the CSS. I'm viewing this bug through browserstack, which makes it very difficult for me to diagnose. Thank you.
You seem to be using transition in the code, that specific event is not supported by IE 10, 9 or 8. To get a better idea of the browser support available for transition or any other CSS you could check it out here: http://caniuse.com/#search=transition
If you're still having issues, I suggest showing some of your code and possible a gif of whats happening exactly.
Related
On my website, I experience - and a lot of others do on theirs - a kind of jumping/lagging effect with Internet Explorer 11 (on a Windows 8.1 machine) when creating a parallax. On Firefox for example it is working absolutely fine.
According to my research, this is a common problem with IE11 that has no solution, but I have found a website that somehow fixed the issue (or made a Workaround?!?) :
http://focuslabllc.com/journal
But my website has the same issue as this one:
http://negativespacealphabet.com/
What are they doing differently to get it work? I appreciate your help!
Best solution I have seen to this issue is to use transition on whatever properties you are using to create the parallax.
Example, you use transform:translateY to create a parralax effect, then add:
transition:transform 10ms linear
This forces the parralax to animate smoothly.
Downside, its not fully backward compatible with older browsers
I am having shadow boxissues when I extend my side navigation in Internet Explorer only. This is not an issue with Chrome or Firefox. It leaves the bottom line of the site every time you change the position of the site. Is there anyway to clear this issue, or any suggestions would be great. The site if you want to check out the code and issue is.
http://www.rsd17.org/test/test/district1.shtml
Here is link to image to show you what I am talking about.
http://i41.tinypic.com/2m07c7.jpg
Just an update. This only seems to be an issue now on IE 10. Anyone know a fix?
box-shadow browser compatibility.
I'm assuming you're testing on IE 8 or lower? Please edit the question to include the version of IE you're testing on, as what it supports varies somewhat between versions.
I was able to fix my own issue by giving my footer div a box-shadow this added to its css
box-shadow: 0 0 20px transparent;
This seems to have solved the issue. Not sure its the best way but it works enough for me. Thanks again for the help guys.
I have a div, so that when I click, it will toggle to expand, or retract. It works pretty well on all browsers, though there is a thing that intrigues me. On Google Chrome when it retracts it leaves small lines from the movement.
www.rezoluz.com/login.php - The page
To see it, open that page with Google Chrome. And click on the register button twice, on the second time it will leave lines, normally, but not on other browsers. I'm using a standard .animate, with jquery. All help is greatly appreciated.
SCREENSHOT:
Also, here is a jsfiddle showing the result : http://jsfiddle.net/rwQPu/2/ . Error in Chrome 21.0.1180.81 beta-m Win7.
It's a bug of chrome. See a previously asked question here :
Odd “shaking” effect when animating width with jQuery (only in Chrome!)
This is not a coding problem but actually a bug in certain versions of Google Chrome, as unlikely that may sound.
There is no fix as far a I know, we just need to wait for Google to resolve their problem, knowing Google that will be done from the moment they find out about it.
I am using a div as a popup which is draggable as follows
$("#popup").draggable();
The problem is if we mouseclick on this div and leave the click, then the div sticks to the mouse in some IE versions, especially on Windows 7. The div moves with the mouse even if its not click & drag action (its just a mouseover action). Please let me know if this is jQuery bug or some OS/browser bug with proper solution?
I am using jquery-ui-1.8.6 js with jquery-1.4.2 js.
i will recommend you to use the latest versions of both jquery-ui and jquery library file..
the code you provide has not much enough to be debate about but as you mentioned, it could be because of the older version of files.
i am using latest versions of both files (jquery-ui-1.8.21/jquery-1.7.1) and dragging is working fine in all ie versions.
but when you are using iframes, things went little different. because some browsers specially ie handles iframes differently, i might be guessing but it could be the case! :)
This is the closest I've seen:
Changing font-size with jQuery css() function is crashing Chrome
But it didn't help.
Other threads mentioned that it's a bug in Webkit, but those were old threads and I couldn't find the bug report on Webkit's site.
The problem is that the header has a fixed width picture background and the navigation menu needs to stay within that width. I've since given up on HTML or CSS methods of accomplishing this. If you know of any, then please do share. So I've resorted to JavaScript (jQuery). And it works reasonably well, except in Chrome. The text actually increases in size for some odd reason.
Here's the simplified code in JSFiddle:
http://jsfiddle.net/alininja/j4jD9/12/
This gist of the code is this line:
$('body').css('font-size',(content_size-1)+'px');
For FireFox and Opera, the text size decreases to fit the header width, but not in Chrome.
If I run JSFiddle in Chrome everything works, but the funny behavior shows up on the actual website. This is happening on Chrome 17.0.963.56.
Thanks in advance!
If you want presentation consistency cross browser there is more involved than just setting font-size. You are assuming other font property defaults such as font-family are the same cross browser which they are not.
Use of a css reset will help