I am using #font-face on a site I am working on, and all is working perfectly cross-browser until I use a modal window to display an iframe.
When a link is clicked within the iframe or a form is submitted, Internet Explorer 8 loses the #font-face styling and reverts to Arial. This problem also occurs if a modal window is opened with an iframe, then closed again, and then the user highlights text. As soon as the text is highlighted, it loses its font styling.
Has anyone else had this problem before or found a way around this?
I've found this issue too. I've done some work on trying to reproduce, and found it's extremely variable. Sometimes it will happen, sometimes not.
See my full post here:
http://kenneth.kufluk.com/blog/2010/02/losing-face-with-ie8/
Things to try:
Check your doctypes match
Remove all fallback fonts (bit harsh, but seemed to work)
Use javascript to reload the stylesheet after the window closes
Related
I have a website where all links are working normally in the major browsers except Safari. In Safari, if the user clicks on a link with target="_blank" and then goes back to the original tab, the link is no longer styled as a link. If you then close the newly opened tab, the link immediately updates to being styled.
That is:
In my site at https://mysite.umich.edu/myapp I have a link in this format:
Accept Role in our Glossary of Terms
On the page, it looks like this:
When I click on that link, the linked-to URL (the glossary) opens up in a new tab, and I am taken to that tab. If I then go back to the tab where I started (https://mysite.umich.edu/myapp), the link is no longer styled as a link:
If then, staying on the original page, I close the newly opened tab (the one showing the glossary), the link will immediately go back to looking like the first screenshot above.
Debugging this is made more complicated by the fact that the problem doesn't happen if Developer Tools are open. Also, some sequence of clicks will make the problem go away, but I have not yet been able to reproduce that effect.
It seems like this must be some sort of timing issue in Safari. Does anyone have any clues about how to fix it?
There does seem to be some sort of timing issue with Safari whereby it holds on to the CSS for A:HOVER in the original tab even after the user has moved the cursor away from the link, but this would not have been a problem if we had had a reasonable CSS rule for A:HOVER. Since our A:HOVER CSS rule set the text color to the same color as our default text, we could not, of course, distinguish the link from the surrounding text. Changing the CSS made this a non-issue.
So it seems like Safari is misbehaving, but in our situation, at least, there is a workaround.
This is really odd. I'm not complaining that something works, but it is very surprising ..
On my website I had the usual css :hover for the navigation to reveal sublinks. But on the mobile browsers this needed some js help to make it work (as you can see from those many posts about "css hover not working on mobile browsers")
I made a simple script to fix the hover problem. But today as I was rewriting the code, since I noticed that it was not fully working as intended, I removed the entire mobileDetect.js which was handling the mobile hover. And now it works, without any additional scripts.
I tested it with chrome and safari on my ipad and iphone. It works as intended... did I misse out a big mobile browser update or something?
I use Jquery from google, no framework and standard HTML5.
Here is the site : (easy-sailing.ch) "EVENTS" and "AUSBILDUNG" are the mentioned navigations with sublinks.
I am just wondering if this is some odd anomaly and therefor should put my script back in or just enjoy the good news? :S
as far as i remember it has always been working...
...it is just not needed because there's no cursor and hover happens usually when you click (touch in this case) and you'll leave the page before noticing hover.
on android i can observe it when i touch+slide up or down.
I have fixed this for me by removing :hover selectors/rules at runtime https://github.com/kof/remove-hover
In my application, I am including one page within another via an iframe. I'm working on a quick prototype here, so I don't want to take additional time right now to implement something fancier].
Everything looks good except for IE10 on Windows 7. From what I can tell, the style sheet of the iframe is being added into the cascade of the style sheet for the page and causing strange display errors. I'm a little dumbfounded this is even possible.
If I comment out the iframe, everything renders correctly.
I can also see the styles changing as the iframe loads:
Pre-iframe: http://screencast.com/t/8qcl2U4Uuy
Post-iframe: http://screencast.com/t/fzR9esWsq
Anyone else experience strange behavior like this?
Thanks in advance.
Thank you for your reply. My coworker was actually able to help me trace this back to an issue with the IE10 developer toolbar.
I was able to create a file that replicates the issue: https://dl.dropboxusercontent.com/u/1686497/iframe.zip
If you open the index, you'll notice that there is no margin on the body. While you have that page open and you open the F12 Developer Toolbar in IE10 (10.0.9200.16540) on Windows 7 (at least), you will see the body becomes padded and the parent window font switches to Times. Hope this helps someone!
I'm changing over a site from HTML to Wordpress (for the first time, so be gentle!) and I ran into an issue with Google Chrome applying styles that I've never knew existed! In this case I'm referencing the style that positions the bg.gif image background. In both IE9 and Firefox the background elements seem to work just fine, but in Google Chrome I'm having the issue.
If you go to this site: http://www.richmindonline.com/doggy2/ then right-click the upper right corner of the page in Google Chrome, then click "Inspect Element", you will notice styles that are being applied that have nothing to do with my stylesheets.
Could someone provide some guidance as to how to fix this. I've already tried adding my own styles to trump the Chrome styles, but it's not working.
Which styles are you trying to override? What you're seeing are browser defaults - all browsers have them whether they show you or not.
What I'm seeing in the inspector is Chrome identifying the text direction and locale. Are you using a CSS reset?
http://www.cssreset.com/
Should go a long way in starting all browsers at the same default.
After months of working correctly, the large version of the Facebook Like button has stopped displaying the number of "Likes". The compact version works correctly, but the big button hides the number. I am on a Mac, and the buggy behavior is consistent on Chrome, Firefox and Safari. You can see the big buttons NOT working on JoomlaDigger.com, and you can see all the small buttons working correctly on each article view.
After digging into the markup, the div with class "connect_widget_number_cloud" has element style "visibility:hidden". Very strange, since the markup does NOT show this CSS style, but Chrome CSS Inspector shows the element style.
This bug appeared on September 1st, 2011. Can anybody from Facebook comment on this?
It is also currently broken on Facebooks own page. And the bug has already been filed.