There's a website I built a few years ago using sIFR. Nothing's really changed on it at all in terms of styling — just some content added/removed edited via XML.
The site owner emailed me today asking why suddenly some of the text (rendered in sIFR3) is breaking like this:
I could not reproduce this on any of my browsers. It was happening to him in both FF and Safari (Mac). We are using the same browser versions on the same OS. He was on OS X 10.6.6 but upgraded to 10.6.7 while were trying to narrow down what would cause it. He still got the "incorrect" version. I downgraded my Flash plugins to the exact version he had on his computer, and I still had the "correct" version. He checked all the other computers at his office, and they all rendered it correctly as well.
So in two environments where all of these things were identical:
Operating system and version
Browser version
Flash player/plugin version
What other possibilities could be causing the discrepancy?
I had wrapping text letters in IE but not FF -- but I found the solution. I used forceSingleLine: true; in my sIFR.replace styles in sifr-config.jsp. Below is an example of it being used.
sIFR.replace(test, {
selector: 'h1',
css: '.sIFR-root { color: #cccccc; width: 100%; text-align: left; letter-spacing:1;}',
wmode: 'transparent',
forceSingleLine: true;
});
I found the answer here:
http://www.conetrees.com/2009/10/quickposts/fixing-the-sifr-3-text-wrap-issue/
Related
I have a web application using angularjs and material-design.
I use md-dialog for adding and editing certain records from the database. This is responsive and works as expected on my desktop for all browsers except IE (no great surprise). This is how it is supposed to look.
However, if I run the application in safari on a Mac, or any browser on iOS (including chrome), the dialog appears to be missing the contents (has no height).
While IE doesn't have exactly the same issue, it does appear to be similar. So, I believe it is an issue with how iOS renders the flex attributes. However, I am not sure and don't know how to confirm on my iPad.
My search so far has not provided any working solutions to this issue, but I have seen others ask the same question (though not through stack).
What causes this issue?
How do I fix it for an iPad?
UPDATE
This is how the dialog is rendered in the html:
<md-dialog-content class="flex" id="dialogContent_140" flex>
<form name="workerDialog" class="md-dialog-content ng-pristine ng-invalid-required ng-valid-mindate ng-valid-maxdate nd-valid-filtered ng-valid-valid ng-valid-minlength ng-valid-maxlength ng-valid-pattern ng-valid-unique" style>
...
</form>
</md-dialog-content>
If I modify the element and remove flex like this:
<md-dialog-content class="flex" id="dialogContent_140">
The body content appears as expected (at least on the MAC).
I can also modify the css in angular-material.min.css and remove -webkit-flex, -ms-flex, flex and achieve the same results.
[flex]{
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
box-sizing: border-box;
}
I can't completely kill flex for the rest of the application, but I have to allow this to work on an iPad.
I found the cause of my issues. Thanks to #Tran Khanh Nguyen for moving me in the right direction.
When the dialog was defined, someone added <md-dialog-content flex>. I removed flex and it fixed the issue on all devices.
For more information, with some special browser (e.g. IE, IOS browser...) we should consider to add the value for flex, like flex="auto" or flex="100", it will help anuglar-material would fine on these browsers.
I want to include a custom font in a website I'm working on. When I went to test it, it was rendering just fine on my Macbook but not my iPhone.
I have been declaring them in my stylsheet like this:
#font-face {
font-family: JosenfinSans;
src: url("./fonts/JosenfinSans-Bold.ttf") format("truetype");
font-weight: bold; }
Is there anything that I have been doing wrong?
Looks like are you loading the font from a local directory on your laptop which is not present on your phone. Suggest you source it from Google Fonts https://www.google.com/fonts#UsePlace:use/Collection:Josefin+Sans. This way it should work for all devices.
When I use Google Webfonts, they load fine on every browser I care about, EXCEPT Chrome/iOS. This seems odd, as it works fine on Chrome for Mac and Safari for iOS, so I don't think it's an iOS problem or a Google Chrome problem. It seems to be specific to Chrome/iOS.
Any ideas, or ideas on HOW to troubleshoot this, would be great!
Thanks!
EDIT
I am using Google Web Fonts hosted on Google, with the following:
<link href="http://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet" type="text/css" />
In my font (SASS), I am using the following:
h1
font-family: "Leckerli One", cursive
I'm seeing the same issue. Hosting the font files on my own server and rewriting the #font-face rules to match solved the issue for me, both with my local dev server and in prod.
I don't know the cause; my best guess would be some same-origin issue that's enforced differently in UIWebViews (iOS Chrome being a UIWebView due to App Store rules).
You can use the Google Fonts API Loader which will detect the user's browser and send back appropriately formatted CSS.
Sample code is available in the first response on this Stack Overflow question.
This will allow both Safari and Chrome (and other UIWebView-based browsers) to display the font correctly.
Note: if you want to store the fonts locally, as #Dave suggested, this CSS should work.
IOS devices use TTF formats only (or OTF if they follow the developer guidelines below). That font is being served as WOFF, EOT and OTF (assumably not following the guidelines) . There are some services that will give you other versions. Try specifying the font using #font-face and see if that fixes the issue! Fontsquirrel has an #font-face generator to do the heavy lifting.
In regards to the follow up question. There are some developer documentation from Apple on their implementation of TrueType Fonts. It can be found here. Essentially, TTF formats store the font as sfnt resources. The only other font format that can do this is OpenType's offset table sfnt wrapper. Because IOS reads fonts using sfnt wrappers, you will run into issues with fonts that are not stored in this way. (Sorry for all the jargonny talk).
In the CSS you may use
!important
Example:
#font-face {
font-family: 'Monda' !important;
font-style: normal !important;
font-weight: 400 !important;
src: local('Monda Regular'), local('Monda-Regular'), url(http://themes.googleusercontent.com/static/fonts/monda/v1/sk05J8GA1NvUxDnk43EgAQ.woff) format('woff') !important;
}
In case anyone else still sees this issue - a font not loading in Chrome on iOS 9 or older - double check that the font is imported as a css file, and not as a js file. Fonts.com will give you the option to import fonts as js, which won't get picked up on Chrome / iOS 9 or below. Changing my import to css fixed this for me.
For me works add in php page:
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Trocchi');
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
</style>
I've got similar problem with UIWebView lately. I made additional changes to both iOS app and web source, nothing helped.
Finally fixed it by simply changing Google Font's link to https.
My internet was just shut off... so I'm at the library trying to fix one last feature of my test page (and eventually my site) before the portfolio review date on the 1st (TOMORROW!!!).
Here's the problem, all this time I've been testing compatibility of my site with IE9/FF4/Chrome12/Safari (latest) but NOT IE7/8. My site/test page works as I want in the browsers I've been testing with.
As luck would have it, the library I'm at has IE7 installed and apparently won't upgrade to IE8, which I think would render my page correctly. I think so due to finding many instances of issues with page renderings in IE7 while there are none in IE8 for the same page through some investigating.
Anyway, on the test page linked above, the text tab slide-out div in the top-left corner of the page isn't displaying and oddly enough, a simple image link at the bottom right of the page isn't either. Those two happen to be the first and last links on the page, if that helps at all (I'm thinking it may have something to do with that). Everything else on the test page is functioning/displaying properly. Just view the test page through any of the above browsers that I've tested with to see how it should display/function.
I've tried adjusting the z-index (as I've found a few cases where that was the culprit of the IE7 misbehaving) but to no avail. I'm stuck and don't know where to go next.
Any help/pointers would be very appreciated as this is getting reviewed tomorrow! A lot is riding on this review and I want to ensure that the reviewers can view the page as intended if they are using IE7.
Edit: CSS, JS
In your CSS, if you change your
.SU{
display:inline-block;
}
to
.SU{
display:block;
}
You can see the jaguar no problem.
Apparently, IE7 has issues with display:inline-block;
I would google "CSS differences between IE7 and IE9" and "JavaScript differences between IE7 and IE9".
Also, IE7 and IE8 do not support HTML5 markup very well (or at all). So I hope you aren't using that.
Problem with this CSS style:
.SU
{
text-indent: -9999px;
}
This is hiding the image for me when I run your test page in IE9 in compatibility mode. When I remove the text-indent style I can see the cougar image at the bottom. I seem to remember reading about this text-indent hack being a way for screen readers to read the link, but developers found it was breaking when new (IE7+) browsers were released.
When I run the page in IE9 in compatibility mode, your "Text" popout menu works fine.
IE7 inline-block trick
#id {
display: inline-block;
*zoom: 1;
*display: inline;
}
For why, search google for "hasLayout". ...oh how i love IE...
With regards to the text options, have you tried messing about with the left offset (-140px) applied to your <div class='optsdiv' > perhaps trying it set to zero [0] or even omitting the attribute entirely.
I know changing this value won't necessarily fix your issue, but it might point you in the right direction...
Bottom link seems to work on my IE7 by the way... not sure if you've perhaps fixed this issue already. my build version is 7.0.5730.13 for reference.
Good luck with the fix! IE sux ass...
IE 7 doesnt support block elements (like button) in a-tag... that was the problem here i had.
Simple questions.
Can you change the color of sIFR after the flash has been applied?
I have a bit of a Google, but can't seem to find anything. Only people not being able to set the color initially.
Thanks
I don't know about sIFR, but on a side note, I'd heavily recommend CSS 3 embedded fonts over the aesthetically displeasing sIFR, which is inaccessible, slow and can't be copied along with selected text.
As Delan mentioned, I would suggest not using sIFR anymore. With the browsers currently in use, you have pretty decent CSS support. Convert your TTF to EOT for older versions of Internet Explorer, using this tool for example: http://www.kirsle.net/wizards/ttf2eot.cgi
Then use this CSS. In this case my font is called Techno:
#font-face
{
font-family: Techno;
src: url("/Techno.eot") /* EOT file for IE */
}
#font-face
{
font-family: Techno;
src: url("/Techno.ttf") /* TTF file for CSS3 browsers */
}
This covers recent Safari (3.1+ afaik), Firefox (3.5+) and Opera versions. Mobile Safari doesn't do this, but wait, it doesn't do Flash either :)
Well, after contacting the font companies, it seems I can use cufon (with the purchase if another license, which is the same as sIFR anway). S0. I have decided to go with cufon...