I have a site that works fine in Chrome, Firefox, IE7-11, android, iOS (both ipad and iphone) yet for some unknown reason all elements except the header and rotating banner are invisible in Safari and only Safari.
The elements are all present and when inspected the outlines of each individual elements appear.
If I disable CSS the elements all appear and are there.
As I scroll through the page, which for the post part is just blank white space occasionally some of the elements will reappear in a very glitchy way, perhaps just a thin vertical stripe of the element will be visible then it will disappear.
I can't make the site public at the moment, but here is a screenshot showing the issue:
Has anyone had something similar happen before in Safari, or have any suggestions?
It looks like the div is hidden.
Add z-index:1; to the div with tdp_row_fullwidth center-yes light-no class and the div shows up in safari for me.
What worked for me was the font-family that was being used was not loaded in Safari, once I changed it, the element "showed" up.
Related
Making a website for my university project and have hit a small problem when viewing my site in Chrome (which is usually great for compatibility so I'm probably playing dumb). I've set the header bar and 'controls_container' as both position:fixed in order to have them in view when scrolling down the page, yet in Chrome these aren't fixed, whereas in IE, Safari and Firefox it works as intended.
This is the top of the page viewed in Chrome:
This is after scrolling down in Chrome:
(Header bar scrolls up, as does the breadcrumb buttons on the left)
This is after scrolling in IE:
Can't remove z-index from the video as it's my background video.
Here is the link to my site, any help would be much appreciated!
http://conet.co.uk/p_c_h/explore.html
The elements you’ve mentioned — header bar and .controls_container — are actually fixed. The problem here is in rendering, which acts odd, when you use background video.
Try to add backface-visibility: hidden; or transform: translateZ(0); to the styles of fixed elements and the problem go away. These attributes put your fixed elements in separate rendering layer — stacking context — and browser renders them correctly.
Looks like a rendering issue in Chrome. If you delete the "banner_video" node, everything works as expected.
See https://code.google.com/p/chromium/issues/detail?id=402211
Recently radio buttons on a web page that I maintain stopped working in webkit browsers Chrome and Safari.
They work just fine in Internet Explorer, Firefox for Window and Firefox for Mac.
By successively removing html from the page I have isolated the problem. It is caused by an adjacent div that has a height attribute. If I remove the height attribute on the adjacent div, the radio buttons work.
I tried to attach screen shots showing both cases. However only one screen shot seems to show when I save the edits. So it seems only one screen shot is allowed.
The visible screen shot shows after the problem is fixed by unchecking the height attribute of the "progress indicator" div.
I found a better solution than working with the height. Instead add overflow:auto to the nearby div.
We have a page with a table of invoices on it inside an iframe. In IE, horizontal scrolling works and looks fine. On Chrome, if you scroll over to the right, then back to the left, you see these ugly vertical lines:
This seems like a problem with doctype, but I've tried changing that and it hasn't helped. This only occurs in Chrome and only after horizontal scrolling; Firefox and IE do not show these. I'm thinking that it has to do with some HTML on the page that Chrome is rendering differently but I haven't been able to find exactly what it is.
Has anyone seen this before or have an idea on how to fix it?
I believe it's related to a Chrome bug:
https://groups.google.com/a/chromium.org/forum/?fromgroups#!topic/chromium-bugs/eUfzp3UJDwo%5B1-25%5D
A possible workaround (or hint for a workaround here):
Chrome bug: iframe rendering lines on screen when scrolling up
When viewing http://adam.inbulgaria.org in Firefox, it displays as it should; in Chrome and Opera, however, the floated image containers misbehave. I'm sure this has to do with my use of experimental properties (rotation, transitions on hover), but what can I do to make it better?
To clarify, in Chrome 17.0.963.56 m, when hovering above the images, some empty space appears under them. In Opera 11.11, there's space to the right of the images, even when not hovering.
It shows up like it should in Chrome 17.0.963.56 on Mac. The only difference i can see is the font size + the horizontal bars look different.
I have a site that works fine in android browser, FF, Chrome, Safari IE9+ but in IE8 the upper half of an elements background disapears as well as the background color on a couple of input elements.
I have run through IE debugging tools and also W3C and there is nothing that is coming up that would make this occur.
The site in question is http://ukritic.com if anyone can check it in FF then IE8 and maybe suggest what could be causing the problem it would be greatly appreciated.
If you need anything from me let me know and I will post it up for you.
ADDITION:
The problem that is occurring is that in IE8 the white background containing the content is only visible 1/2 way down the page but is hidden on the upper half of the page and also hidden where the facebook like box is located.
In all other browsers the entire content container shows the #FFF background from the top of the page to the bottom of the page.
We have tested in IE compatibility and normal mode but the problem persists.
What I do notice is that while the page is loading the content container is white but as soon as the page loads completely it disappears on the top half and the facebook container.
Thanks
~M
The problem was in the border-radius.htc file as soon as I removed that call the page rendered perfectly.
There really is no effective way of rendering round corners on ie8 as the .htc file needs a relative path to the page that is rendered which does not really work well with dynamic depth address bars (shortUrls).
Guess I will have to settle for rounded corners only in IE9+ and all other browsers.
Thanks for the input