What are the differences from a developer point of view between Safari for Mac and Safari for Windows?
I think it boils down to evaluate differences between (if I missed something, please correct):
- Layout rendering
- Javascript behavior
The final decision to be made being:
Can developers test only on Safari Windows (knowing that we can't afford to miss important bugs)?
Thanks,
JB
As far as rendering and JavaScript are concerned, there is no difference. What is different is underlaying UI library used for browser itself, but page render is the same.
Font rendering can be different between Mac and Windows Safari as the systems typically have different fonts. As long as your page can gracefully handle missing fonts or different font sizes it should be fine.
Style sheet rendering is significantly different between Safari and Windows. To see this, try creating a page that has an element with a z-index of -1. The windows version will function without issue, the Mac version will not allow you to select the elements. Trust me, I wasted about three hours trying to figure out by trial and error why a page would work in one system but not the other. The worst bit is that when Safari doesn't render something properly, it does so without any indication. You have to debug line for line, a dreadful experience.
I have also seen problems in Safari for Windows that don't exist in Safari for Mac on CSS heavy websites. Can't remember the specifics, but they were there.
I am currently experiencing an issue where floating images in a blog with text wrapping around the image do not properly pad themselves in OS X; works fine in windows. Basically I've added padding to make the image align flush left or right such that the edge of the image is at the same offset as the edge of the text of the post; on OS X the image sticks out past the edge of the text.
A site I am working on now has a problem in safari for mac that isn't in safari 3 or 4 for windows. I cant figure it out for the life of me.
A call to java from javascript throws:
java.net.MalformedURLException: no protocol:
at java.net.URL.(Unknown Source)
at java.net.URL.(Unknown Source)
at java.net.URL.(Unknown Source)
at sun.plugin.liveconnect.SecureInvocation.checkLiveConnectCaller(Unknown Source)
at sun.plugin.liveconnect.SecureInvocation.access$000(Unknown Source)
at sun.plugin.liveconnect.SecureInvocation$2.run(Unknown Source)
at java.security.AccessController.doPrivileged(Native Method)
at sun.plugin.liveconnect.SecureInvocation.CallMethod(Unknown Source)
on Safari windows but not safari mac.
Just wanted to add this experience I came across for Safari. Our devs are still going to look into this but not high priority for us since Windows Safari isn't much of our user base unlike Mac. But I think it relates to either (or both) - actual browser low level implementation of Safari by Apple, and/or javascript differences.
Our website recently implemented an HTML5 multiple file uploader. Single file uploads work fine on both versions of Safari. But when uploading multiple files, it fails on Windows. We had two different upload clients & endpoints for the uploader (think A/B testing flow), and one of them provided more details that may or may not point at the cause of the problem. On one of the client & endpoints, the client would send details of the filenames & filesizes of files to upload (as JSON array object) to the server endpoint (as seen via web inspector). On Mac where it worked, filesizes were valid, on Windows, they were 0 bytes.
I think the uploader is JQuery based or some other JS library. But I'm not the dev, so can't be sure. But I have a hunch this issue goes beyond JS libraries...
I had an issue with the popup blocker in Safari in Windows XP. I guess the blocker didn't accept that the user clicked a link an Flash that then triggered a JavaScript that opened the Window. The did work in the other major browsers and Safari in OS X, though. Chrome also blocked my window in XP, but not in OS X or Ubuntu.
In Mac Safari I'm able to do cross script ajax with file:/// protocol, but in Windows Mac I'm unable to do this.
I am working on a website that has pretty standard layout. I have a box that contains other divs. It works on all major browsers, from IE6+, FF3+, etc. On Safari 5 on OSX, the box is totally to the left, outside the borders of my website. On the same safari version in windows, no problem.
I am going crazy over this.
Related
Firefox 56+ breaks Gamepad API across multiple windows/tabs
The application I am working on uses the Gamepad API to allow xbox controllers to be used to control video producing cameras. It supports multiple windows/tabs.
Everything worked great, but after upgrading from Firefox version 52 to 65 the controllers stopped working correctly when multiple pages were open. The update is necessary for video stability, so downgrading is not an option.
Worst case will update with the fixed Vesrion if Mozilla fixes the issue.
How to reproduce:
Running windows open Firefox version 56+
Open https://html5gamepad.com/
Connect a xbox controller (maybe any gamepad)
Observe that the controller is detected and that input on the gamepad is shown in the tester.
Open a second window and navigate to https://html5gamepad.com/
Observe the at the controller is not detected
Expected: The controller should be detected and inout should be shown in the tester.
If you downgrade below 56 or disable multiprocess using browser.tabs.remote.autostart this issue is not seen.
What I do know / have tried:
Have narrowed down the issue to Firefox version 56.0.0
Can reproduce the issue consistently with https://html5gamepad.com/
Can not reproduce with Chrome or Firefox 52
Turning off browser.tabs.remote.autostart does remedy the issue, but again, this is necessary for video stability and overall performance.
navigator.getGamepads in the second window seems to return an empty list
Tracking ff issue
https://bugzilla.mozilla.org/show_bug.cgi?id=1538805
and ff issue https://bugzilla.mozilla.org/show_bug.cgi?id=1529850
The issue is one per website
Before this is marked as a duplicate. I know this is a similar question as Is there a way to use the HTML5 Gamepad API with multiple windows or tabs in Firefox? but there has been no movement on that issue and it was very specific.
TLDR: FF v56+ with multiprocessing enabled breaks the Gamepad API when used in multiple windows. Any workarounds or fixes?
I need your help my website is not functioning properly on firefox browser but in edge, chrome and opera and safari it works only firefox is not functioning properly
Firefox Browser
Google Chrome Browser
I would recommend setting up all your projects in Xampp or something similar first before testing it. If you are going to upload to a server you need to replicate the environment locally before you decide whether it is going to work or not. It seems complicated but it is quite simple, you can find out more here. https://www.apachefriends.org/
That said, check your urls, they are not the same for your two different screens, the one is referencing an anchor tag.
Is it possible to set a min width for an OSX window to 320px?
The default min width in Safari is greater than this which makes it difficult to program with media queries and replicate on OSX. Please see my screenshot, which will make things clearer.
Incidentally if you are going to post techy answers (I assume someone will) please bear in mind I have no experience with backend code, the most I know is CSS / PHP / JS.
I don't mind getting my hands dirty, but the instructions need to be verbose :-)
Taken from This Link - worked for me in both chrome and safari on OS X
var location = 'http://www.my-app-address.com'
javascript:open(location,'iPhone:portrait','innerWidth='+(320+15)+',innerHeight='+(480+15)+',scrollbars=yes');
and for landscape:
javascript:open(location,'iPhone:landscape','innerWidth='+(480+15)+',innerHeight='+(320+15)+',scrollbars=yes');
In Safari, you can install an extension called 'Resizer' and you have the option of putting in custom sizes.
The funny thing is, once you use Resizer to change the window size, it can then be resized by hand to any size you want. It is almost like using Resizer unlocks the window.
I've created a chrome extension,OSX Resizer, that makes a 320px pop-up of the current window.
Basically the same as Rubinsh's solution, but code free.
The Resizer extension that drummin mentions does not provide this behavior for me.
This can be emulated through Chrome Dev Tools now.
Open Inspector, click the gear on the bottom right, and goto the 'Overrides' tab.
You can even spoof your user agent :)
If your goal is to see how sites will look on an iPhone, you can always download Xcode for free from the Mac App Store, which includes the iOS Simulator.
Alternatively, if you have an iPhone (I assume you do if you're developing sites for it), iOS 6 includes a remote debugging feature that lets you use the Web Inspector on your Mac to inspect and edit a site loaded on your iPhone.
I'm having troubles testing a StageVideo file locally. The HTML file that contains the swf loads perfectly in Chrome & FireFox, but when I go to open it in Internet Explorer 9 nothing happens (it just shows a white screen).
I've added the permissions for the location to the 'Global Security Settings' tab of the Flash settings manager (on the Macromedia website). I've also checked in the IE9 settings to make sure that it allows GPU rendering.
Has anyone encountered anything similar or have any suggestions as to why it might be blocked in IE9?
Thanks in advance.
My gut feeling is that you don't have the latest Flash Player for IE, but do have it for Chrome/FF since they're 2 different versions. The swf probably doesn't even load up because of the Flash Player requirement.
I'm looking to target a website specifically for an iPad but we don't have any Macs in house for testing. What's the most accurate way to test the site on a PC? I image I could use the Safari browser and shrink the window down to approximate the iPad screen size but I wonder if there's a better method out there.
If you target a website specifically for a particular device, buy that particular device. This doesn't only apply to iPad.
Two caveats I noticed a lot of websites have for a touch-oriented device like an iPad, iPhone:
The mouse-hover event isn't generated. So, the HTML/CSS/Javascript menu structure which works without clicking on a WebKit browser (like Safari) on a mouse-oriented device might stop working completely.
The scrolling event (coming from a flick of a finger) is not passed to elements inside a page; instead it just scrolls the entire page. A subelement shown with a scroll bar on a non-touch-oriented device might be shown without the scroll bar at all. So, sometimes you lose the ability to scroll inside a subelement.
There might be other caveats. It's really difficult to imagine all the way a device might behave differently from a mouse-oriented device; so, buy an iPad.
By the way, it's of no use to buy a Mac in this situation: Safari on a Mac still behaves (as far as the mouse/touch events are concerned) rather differently from Safari on an iPad/iPhone. An iPad can be paired with a Windows PC.
See this Apple document for a few advices for preparing a web page for the iPad.
I'd just use Safari, as the mobile version uses the same rendering engine (though possibly modified to fit the iPads resources).
It should display the same, if not close.
You can try to use online imitation services.
For example http://app.crossbrowsertesting.com/, or https://saucelabs.com/. They provide lots of imitations environments, for different devices and OS. You can test the site, that is already in the web, or your local files.
I myself am working currently with app.crossbrowsertesting.com for the first time. It really shows the problem, that the client encountered on his iPad. Also have good notices about these services from experienced developer, a friend of mine.