Why does the same form/field appear diffently depending on the browser?
The primary confusion around this is that the widgets (the code responsible for field input) for datetime, datetime range, and timestamp fields use HTML5 date/time input elements (except when using the select list version).  One for the date portion, and one for the time portion.

The browser, not Drupal, renders out HTML5 date/time input elements.  So, the actual UI will vary from browser to browser, and OS-to-OS.  In addition, not all browsers support these inputs.  

When a browser encounters an input element type it doesn't recognize, it defaults back to plain text entry.  In this case, Drupal provides a polyfill for the date portion based on the jQuery UI component.  There is an issue for the time element, but it currently languishing in the queue.

It looks like from your screenshots, Safari is using the polyfill and the rest are using the browser versions of the inputs.

The "yyyy-mm-dd" format for Safari, is a side effect of the fallback.  The HTML5 input elements require dates in that format, so that is how the widget gets configured and rendered out.  The native elements are using a localized version of the inputs, and handling the conversion behind the scenes so that Drupal gets the right format.