I've created a website.
On all browsers, except for IE7 & IE10 compatibility it is rendering just fine.
On these specific browsers, there is weird whitespace below the page and finally the picture sliders.
I've tried targeting these browsers specifically using css hacks, however; all of these were unsuccessful.
Can this fix your problem?
CSS:
body {
background-color: #28A31E;
}
EDIT:
I'm not sure what wrong behavior do you mean. In G chrome, I see large white space below page. In IE10 I don't see sliders at all and page is very long, but it seems that is ok because of right panel...
Related
I've never faced this issue ever, so I completely updated my mac + Safari (macOS Big Sur 11.2.3, Safari 14.0.3). The problem is that whatever js interaction I use on my page is bugged in Safari only (work perfectly in FF and Chrome). You can see the kind of animations I use (gradual hiding + showing of elements via max-height + opacity on click of elements) in this snippet.
The problem is that Safari behaves very weirdly with these. Sometimes, the clicked element also disappears; disappeared elements fail to reappear when the animation is reset; sometimes one of the not-clicked elements disappears on hover; etc.; really weird things. All this while no console / js error is reported, and things work perfectly smooth in FF and Chrome.
In the Internet I found countless reports about similar behaviour in Safari, but mostly the answer referred to js / css errors. My script's even written in ES5.
I checked about 100 times now, and have none of these errors.
Then I came across this post, which made me try to change the font. And indeed, everything also works in Safari when I use a default browser font as Arial, etc., but that's obviously not what my client wants.
The font of that site is Bank Gothic Light & Bank Gothic Medium, and I'm using ttf and woff files as font source files, which I define as custom fonts using #font-face in my stylesheets, and then I apply them via font-family in my stylesheets. With this, the animations have the mentioned weird behaviour in Safari. Simply when changing the font of the concerned elements to let's say Arial, it all works.
Ideally, I want every animation to work, while sticking to the Gothic fonts in all FF, Chrome AND Safari. Any clue what to do here / why this happens?
Problem solved by getting a new font source file (ttf and woff) from another source; seemed to be buggy (Nothing at all changed in my HTML, CSS, JS, PHP, not in whichever code!). I changed the title of my question to be more general, as one may (at least that was the case for me) totally not think that these Safari - rendering issues are due to the used fonts... To avoid that people with the same issue may not need to search for the reply for hours..
I use the Simple Utility Function from this Answer to detect if a element is in my viewport. If it is, an fade-in animation is started for my content.
It works fine on Windows, macOS, Android and every browser on iOS except for Safari. In Safari the content stays hidden and the animation only starts after I try to zoom out of my site. I tested this on iOS 10 and 11 Beta 5.
My solution to this problem would be detecting if the user uses Safari on iOS and don't animate my content. But i would like to fix this problem so that the animation works. Can anyone help me with this?
EDIT: I think the issue is caused by Semantic-ui.Tested it with plain html and javascript and it works. I try to fix it now.
I finnaly found a solution.
The issue was the sidebar from Semantic UI. I found a CSS snipped on the docs. I altered the code a little bit and added it to my css file.
html.ios {
overflow-x: hidden;
-webkit-overflow-scrolling: auto !important;
}
html.ios,
html.ios body {
height: initial !important;
}
Seems like -webkit-overflow-scrolling caused the problem. But i had to add the other lines of code too or else it stutters when i scroll.
Like this, everything works perfectly!
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.
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
In my web application I frequently have sections that need to be collapsed/expanded. I do this with jQuery using the slideDown() and slideUp() methods. They work great. However, in Firefox, if I am scrolled all the way to the bottom of the screen and I collapse a div the screen stutters and flashes as the div disappears and the page is automatically resized by the loss of the element.
Has anyone run into this problem before? I've been working around it by setting a min-height with a generous amount of space for any section that will be collapsible but this seems like an unnecessary solution. Chrome doesn't have this problem and, amazingly, neither does Internet Explorer, both of which smoothly resize the page without any sort of stutter or flashing.
I'm using Firefox 3.6 on Ubuntu and I've experienced this problem on earlier versions as well. I have not tested on Firefox 4.
I have ran into this problem before and yes. I have worked around this by setting a mini-height or consider not using a slide effect.