I have a very simple page Here created by semantic-ui. the problem is some texts specially black colored texts are not visible in android firefox browser.I have tested this with 4 different mobile phones.
This is a windows Firefox:
And this is android Firefox:
Any idea what is the problem? I omitted my html code because it is too long
You have a setting of font-weight: 700; for those elements. If you erase that, the text becomes visible again. I suppose it's a font issue.
Related
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.
If I set position: fixed to my div, the font text inside will be rendered thinner and no readable at all.
If the position is absolute, relative or static the font is rendered in the right way.
The problem occur with Safari for iOS 6 only. I got no issues with an iPad with iOS 7.
Any ideas or custom webkit property I can tweak with?
(i've already tried -webkit-text-size-adjust: 100% with no results)
The problem occurs even with system fonts custom font.
Try the following
-webkit-font-smoothing: antialiased;
This is caused by the different way the browsers render fonts.
On a slider I have on my site, for some reason iPhone users are reporting that the text in the main slider (royal slider) isn't displaying. I've tested it in multiple online simulators (but they've probably just been restricting the size, rather than using the iPhones rendering engine) and have yet to replicate the issue.
It works fine for me on Android devices, but can't figure out what would stop it from showing on an iPhone.
Any ideas why?
Here's the url Issue is in the main slider in "Breaking" news section
Thanks!
It seems the royalslider.css file is telling the <a> containing the text to hide in Safari (desktop and mobile) browsers. Check Safari on the desktop and you'll see the following CSS on line 29 of royalslider.css.
-webkit-backface-visibility: hidden;
You'll probably want to override the value in your CSS file.
Here's some info on backface-visibility
in my site I have problem in proper rendering of icons in Google Chrome as shown.
As you can see the right and bottom edge of image seems to be cut-off. But the same icons renders properly in all other browser including IE, FF, Safari.
Following is the screenshot of mozilla for the same.
Actually icons are of very big size around almost 1000 X 1000px, and I'm showing that in 100 X 100px area. The problem is I can't scale down the images and I have to use these images only.
In chrome when I zoom-in or zoom-out my website, for a moment it renders correctly but again after some time is renders as shown above.
Any possible solution to this?
Thanks for your time!!
I have resolved it myself by using image-rendering css property.
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