safari interview questions
Top safari frequently asked interview questions
I have the following jQuery code (similar to this question) that works in Firefox and IE, but fails (no errors, just doesn't work) in Chrome and Safari. Any ideas for a workaround?
$("#souper_fancy").focus(function() { $(this).select() });
Source: (StackOverflow)
When an html element is 'focused' (currently selected/tabbed in to), many browsers (at least Safari and Chrome) will put a blue border around it.
For the layout I am working on, this is distracting and does not look right.
<input type="text" name="user" class="middle" id="user" tabindex="1" />
FireFox does not seem to do this, or at least, will let me control it with
border: x;
If someone can tell me how IE performs, I would be curious.
But getting Safari to remove this little bit of flare would be nice.
Thanks
Source: (StackOverflow)
Is there any way to check if a URL scheme is currently registered on the phone... with javascript?
Source: (StackOverflow)
OK, I understand what the messages means, but I'm really not sure what's causing it. I'm using Safari and the Web Inspector on Mac OS X, by the way.
I've got the following in my document head:
<script src="http://local.url/a/js/jquery.js" type="text/javascript"></script>
<script src="http://local.url/a/js/jquery.inplace.js" type="text/javascript"></script>
jquery.js is handled fine, but the other file causes the warning. It also seems that the javascript in this file never gets executed.
The file is being served via mod_deflate, so it is gzip encoded, but so is the other file.
Has anybody got any ideas what's causing this, or how to resolve it?
Cheers all,
Gaz.
Source: (StackOverflow)
This seems to be a problem related to Safari only. I've tried 4 on Mac and 3 on Windows and am still having no luck.
I'm trying to load an external HTML file and have the JavaScript that is embedded execute.
The code I'm trying to use is this:
$("#myBtn").click(function() {
$("#myDiv").load("trackingCode.html");
});
trackingCode.html looks like this (simple now, but will expand once/if I get this working):
<html>
<head>
<title>Tracking HTML File</title>
<script language="javascript" type="text/javascript">
alert("outside the jQuery ready");
$(function() {
alert("inside the jQuery ready");
});
</script>
</head>
<body>
</body>
</html>
I'm seeing both alert messages in IE (6 & 7) and Firefox (2 & 3). However, I am not able to see the messages in Safari (the last browser that I need to be concerned with - project requirements - please no flame wars).
Any thoughts on why Safari is ignoring the JavaScript in the trackingCode.html file?
Eventually I'd like to be able to pass JavaScript objects to this trackingCode.html file to be used within the jQuery ready call, but I'd like to make sure this is possible in all browsers before I go down that road.
Source: (StackOverflow)
I'm working on an iPad-based web app, and need to prevent overscrolling so that it seems less like a web page. I'm currently using this to freeze the viewport and disable overscroll:
document.body.addEventListener('touchmove',function(e){
e.preventDefault();
});
This works great as far as disabling overscroll goes, but the problem is that my app has a number of scrollable divs in it. The above code prevents them from scrolling.
I'm targeting iOS5 and above only, so I've been able to avoid using hacky solutions like iScroll. Instead, I'm using this CSS for my scrollable divs:
.scrollable {
-webkit-overflow-scrolling: touch;
overflow-y:auto;
}
This works perfectly without the document overscroll script, but as mentioned above it kills these divs dead when it's enabled.
Is there any way to use the overscroll fix but exempt my $('.scrollable') divs?
There's got to be some kind of solution for this that doesn't require a jQuery plugin. Like I said, the scrolling divs work perfectly when this script is disabled, so I really want to avoid using iScroll or some other heavy-handed solution.
Thanks!
EDIT:
I found something that's a decent (but not perfect) solution:
// Disable overscroll / viewport moving on everything but scrollable divs
$('body').on('touchmove', function (e) {
if (!$('.scrollable').has($(e.target)).length) e.preventDefault();
});
This does the job, but the viewport still moves when you scroll past the beginning or end of the div. I'd really like to find some way to fully disable that as well.
Source: (StackOverflow)
We're seeing issues with a web app that has a height of 100% on Safari in iOS 7. It appears that the window.innerHeight (672px) doesn't match window.outerHeight (692px), but only in landscape mode. What ends up happening is that in an app with 100% height on the body, you get 20px of extra space. This means that when a user swipes up on our app, the navigation elements get pulled behind the browser chrome. It also means that any absolutely positioned elements that are at the bottom of the screen end up being 20px off.
This issue was also outlined in this question here:
IOS 7 - css - html height - 100% = 692px
And can be seen in this ambiguous screenshot:
What we're trying to do is hack around this so that until Apple fixes the bug, we don't have to worry about it.
One way of doing this is to absolutely position the body only in iOS 7, but this pretty much puts the extra 20px at the top of the page instead of the bottom:
body {
position: absolute;
bottom: 0;
height: 672px !important;
}
Any help with forcing outerHeight to match innerHeight, or hacking around it so that our users can't see this issue would be much appreciated.
Source: (StackOverflow)
I don't believe there is any solution to hide bars programmatically using javascript/css/html, but let me try to describe a problem. We are the team of mobile game developers and we have been developing a game for one year.
After iOS 7 announcement we have faced the problem that it is IMPOSSIBLE to hide the navigation bars. Once user taps in the upper or lower part of the Safari browser, navigation bars are appearing again and hide all controls of the game.
The only solution we have found so far is forcing user to:
- Rotate device
- Scroll the page
- Add application to Home-screen
None of these alternatives is acceptable. It looks like Apple is aware of this problem, but keeps ignoring it. They have closed a reported bug as a duplicate of the bug #14076889.
I believe that we are not the only team who experience the same problem. Does anyone know the solution?
Source: (StackOverflow)
iOS 6 comes with built-in support for remote debugging (1 minute screencast). It plays nice with the new Safari Web Inspector which seems to be a 1 year old fork of WebKit Inspector. It misses some features such JS editing and WebSocket frames inspection.
Safari's Web inspector does use the WebKit remote debugging protocol. However, Safari does not use TCP/HTTP as a transport layer, thus making it incompatible with Chrome.
says Timothy Hatcher (aka Xenon), Apple employe
- What does Safari use for transport layer?
- Can I make a proxy from this mysterious transport layer to HTTP to make it work with Chrome DevTools?
Source: (StackOverflow)
I'm writing a web app for the iPad (not a regular App Store app - it's written using HTML, CSS and JavaScript). Since the keyboard fills up a huge part of the screen, it would make sense to change the app's layout to fit the remaining space when the keyboard is shown. However, I have found no way to detect when or whether the keyboard is shown.
My first idea was to assume that the keyboard is visible when a text field has focus. However, when an external keyboard is attached to an iPad, the virtual keyboard does not show up when a text field receives focus.
In my experiments, the keyboard also did not affect the height or scrollheight of any of the DOM elements, and I have found no proprietary events or properties which indicate whether the keyboard is visible.
Source: (StackOverflow)
So this is the umteenth revenge of the "how do I get 3rd party cookies to work in Safari" question but I'm asking again because I think the playing field has changed, perhaps after February 2012. One of the standard tricks to get 3rd party cookies in Safari was as follows: use some javascript to POST to a hidden iframe. It (used to) trick Safari into thinking that the user had interacted with the 3rd party content and so then allow cookies to be set.
I think this loophole has been closed in the wake of the mild scandal where it was revealed that Google was using that trick with its ads. At the very least, while using this trick I have been completely unable to set cookies in Safari. I unearthed some random internet postings that claimed that Apple was working on closing the loophole but I haven't found any official word.
As a fallback I even tried redesigning the main third party frame so that you had to click on a button before the content would load but even that level of direct interaction was not enough to melt Safari's cold cold heart.
So does anyone know for certain if Safari has indeed closed this loophole? If so, are there other workarounds (other than manually including a session ID in every request)?
Source: (StackOverflow)
I have some trivial JavaScript to effect a style change:
sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;
This works fine with the latest versions of FF, Opera and IE, but fails on the latest versions of Chrome and Safari.
It affects two descendants, which happen to be siblings. The first sibling updates, but the second doesn’t. A child of the second element also has focus and contains the <a> tag that contains the above code in an onclick attribute.
In the Chrome “Developer Tools” window if I nudge (e.g. uncheck & check) any attribute of any element, the second sibling updates to the correct style.
Is there a workaround to easily and programmatically “nudge” WebKit into doing the right thing?
Source: (StackOverflow)
I'm using textarea components in my application, and I control their height dynamically. As the user types, the height is increased whenever there is enough text. This works fine on IE, Firefox, and Safari.
However, in Safari, there is a "handle" tool in the lower right that allows user to resize the textarea by clicking and dragging. I also noticed this issue with the textarea in the stackoverflow Ask a Question page. This tool is confusing and basically gets in the way.
So, is there anyway to hide this resize handle?
(I'm not sure if "handle" is the right word, but I cannot think of a better term.)
Source: (StackOverflow)
I'm trying to "force" Safari or IE7 to open a new page using a new tab.
Programmatically I mean something like:
window.open('page.html','newtaborsomething');
Source: (StackOverflow)
In Internet Explorer I can use the clipboardData object to access the clipboard. How can I do that in FireFox, Safari and/or Chrome?
Source: (StackOverflow)