safari

问题 When using rem as units in css, scaling doesn't really work in Safari (both PC and Mac). Example located at http://jsfiddle.net/L25Pz/3/ Markup: <div> <img src="http://www.google.com/images/srpr/logo3w.png" /> <p>Lorem ipsum dolor sit amet</p> </div> ​ CSS: html { font-size:62.5% } div { background:url(http://www.google.com/images/srpr/logo3w.png); background-size:275px 95px; background-size:27.5rem 9.5rem; background-repeat:no-repeat; } img { width:27.5rem; height:9.5rem; } p { font-size

问题 I have a code which works brilliant in Chrome: #menu ul { list-style-position: inside; list-style-type: none; display: block; margin: 0 auto; padding: 0; } #menu li { font-size: 11px; width: 95px; display: inline-block; vertical-align: top; position: relative; } #menu li a { color: black; text-decoration: none; } #menu li a img { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; position: absolute; top: 0; left: 22px; margin: 0 auto; -webkit-transition: opacity 0.2s linear; -moz

问题 I'm displaying a sound when paypal captures an order and it gets approved. The problem is that the sound is only getting displayed on google chrome, only on computers. Not working in safari, neither in chrome devices. But it's more strange that It once worked on safari for mac, then, when i tried again, it stopped working and now it only works in chrome. This is my code, thanks in advance: <script> paypal.Buttons({ createOrder: function(data, actions) { // This function sets up the details of

问题 I'm trying to use the example given here concerning formatting a number. console.log((16).toLocaleString('en-GB', { style: "unit", unit: "liter", unitDisplay: "long" })); I tried it in chrome and it works great. However, in Safari as well as Firefox I get the following errors respectively Error: style must be either "decimal", "percent", or "currency" and Error: invalid value "unit" for option style . From the docs I figured it should work on all browsers after looking at the browser

问题 I have implemented an OAuth2 client, in which the first step is to send a user to the relevant 3rd party (facebook for this example), I set them a state cookie, and when they return from facebook I validate that state cookie. In Chrome, everything is great. When I send the user to the redirect URL, I can see (using inspect element) that they have the state cookie I set. However, when I try on (desktop) safari on latest MacOS, I don't see that cookie. I set the cookie in the response for my

问题 On OSX Safari, HTML5 video tag when clicking on fullscreen. How can I force the video to cover the full screen instead of showing a small (maybe the original) size with a black background? 回答1: Ok, found it. Need some CSS when a max-height is set. Answer: video:-webkit-full-screen { width: 100%; height: 100%; max-height: 100%; } 回答2: As @Jack say we need to use the CSS -webkit-full-screen I think you wanna have you're own customized controller right? In that case, we need to put the control

问题 Trying to open camera using html5/javascript on ios safari browser but zoom is not supported. Used javascript getMediaDevices and getCapabilities API. But not working for iOs navigator.mediaDevices.getUserMedia({ video : {facingMode: "environment" }}) .then(gotMedia) .catch(e => { console.error('getUserMedia() failed: ', e); }); function gotMedia(mediastream) { videoTag.srcObject = mediastream; document.getElementById('start').disabled = true; var videoTrack = mediastream.getVideoTracks()[0];

问题 So basically I made this situation, the parent has the css all: unset . Then I notice when I use Safari(Version 12.1.1 (14607.2.6.1.1) ) all the children of it color only can be effected by * block, not even inline or !important . But only color behaves that way, as you can see the background-color is using it's own property. But it works fine in Chrome, is it a glitch in safari or I did something wrong? And how can I fix it in Safari? * { color: red; /* Text color is using this one */

问题 For some reason Safari 12 (haven't tried on other versions) is completely ignoring getUserMedia constraints. My code looks something like this navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment', width: { min: 640, ideal: 1280 } }, audio: true }) .then(userStream)//Safari on Mac ignores constraints and ends up executing here .catch(fallback)//Chrome on Mac raises and error and ends up executing here On Chrome when I do stream.getVideoTracks()[0].getConstraints() I get

问题 I just realized that the latest version of Safari (v13.1) that comes with macOs 10.15.4 and iOS 13.4 doesn't support css animations in SVG files anymore. I use this trick to display a loading animation on my portfolio. Now only the first frame of the sag file is display and the animation doesn't start. https://jbkaloya.com No issues with Chrome or Firefox tho. EDIT Here's the corresponding CSS properties in where the file is embedded in the page .loading { background-color: $black-color;