#StackBounty: #html #css #flexbox #safari Text selection background becoming invisible in Safari when selecting inside flex elements wi…

Bounty: 300

When I select text across multiple flex element items in Safari, the selection background becomes invisible on some part of the text.

I’m using React 17 but I would be surprised if the problem was from there.

Here’s some screenshots of the difference between Firefox and Safari:

And here’s a simple code sandbox to reproduce: https://codesandbox.io/s/great-glade-60fmz

Did anyone encountered this problem before?


Get this bounty!!!

#StackBounty: #html #css #safari HTML + CSS infinite scrolling background: Flicker on Safari at repeat

Bounty: 50

I’m creating a scene with a bunch of scrolling layers (foreground, midground, background etc…) but annoyingly I get a flicker on Safari (14.0.3) when the animation restarts. This doesn’t occur on Chrome or Firefox.

I’ve created a minimum reproducible example here:

https://brendon.github.io/safari_flicker/index.html

Here’s the code:

.animation {
  position: relative;
  height: 395px;
  background-image: linear-gradient(#1b9dd9, #00b6ed 44%, #ffe56c 75%);
}

.animation .scrollingAnimation {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.animation .scrollingAnimation:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
}

.animation .foreground:before {
  /* Dimensions: */
  /* width: 1696px; */
  /* height: 74px; */
  min-width: 6784px;
  background-image: url("https://brendon.github.io/safari_flicker/foreground.png");
  background-position: left bottom -11px;
  background-repeat: repeat-x;
  background-size: auto 74px;
  transform: translateX(-1696px);
  animation: foreground 10s linear infinite;
}

@keyframes foreground {
  0% {
    transform: translateX(-1696px);
  }
  to {
    transform: translateX(-3392px);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="animation">
    <div class="foreground scrollingAnimation"></div>
  </div>

</body>

</html>

Here is a video of the issue:

https://github.com/brendon/safari_flicker/raw/main/flicker_video.mp4

I’ve tried many things to get rid of the issue. It seems to sometimes go away depending on the window width, but I’m looking for a solid solution 😀

The issue also exists on iOS Safari.

I should mention that I don’t want to animate the background-position property as this causes performance problems and isn’t accelerated by the GPU.


Get this bounty!!!

#StackBounty: #css #svg #safari #svg-animate #svg-filters CSS Cross-Browser Animation Tips (Liquid / Gooey Checkbox Animation)

Bounty: 50

Regarding this custom CSS radio button (snippet below or @ https://codepen.io/Zaku/pen/xrKMgb)…

Why does Safari show blurred CSS element?

This works perfectly in Chrome but not Safari… demonstration below:

enter image description here

This is a big deal because most iPhone & Mac users default the Safari browser…

Any idea why this is happening and how it can be fixed?

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #af4671 0%, #a45cd1 100%);
}

* {
  box-sizing: border-box;
}

input[type=checkbox] {
  display: none;
}

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: url('#gooey');
}

@keyframes circle__in {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  16% {
    transform: translate(-50%, -50%) scale(0.95, 1.05);
  }

  33% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.05, 0.95);
  }

  66% {
    transform: translate(-50%, -50%) scale(1);
  }

  83% {
    transform: translate(-50%, -50%) scale(0.98, 1.02);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}


input:checked + .circle {
  transform-origin: 50% 50%;
  animation-name: circle__in;
  animation-duration: 750ms;
  animation-timing-function: linear;
}

.circle {
  transform-origin: 50% 50%;
  animation-name: circle__out;
  animation-duration: 1000ms;
  animation-timing-function: ease;
}

.circle--outer {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 6px solid white;
}

.circle--inner {
  top: 15px;
  left: 15px;
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  background: white;
}

@keyframes circle--inner__in {
  0% {
    transform: scale(0.0);
  }

  80% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

input:checked + .circle .circle--inner {
  transform-origin: 50% -20%;
  animation-name: circle--inner__in;
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.85, 0, 0.2, 1);
}

@keyframes circle--inner__out {
  0% {
    transform: scale(1);
  }

  80% {
    transform: scale(0.19);
  }

  99% {
    transform: scale(0.21);
  }

  100% {
    transform: scale(0);
  }
}

.circle--inner {
  animation-name: circle--inner__out;
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.85, 0, 0.2, 1);
  animation-fill-mode: forwards;
}

.circle--inner__1 { transform-origin: -12% -8%; }
.circle--inner__2 { transform-origin: -35% 50%; }
.circle--inner__3 { transform-origin: 60% 130%; }
.circle--inner__4 { transform-origin: 112% 90%; }
.circle--inner__5 { transform-origin: 75% -30%; }

// dribbble - twitter
.dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
  img {
    display: block;
    height: 28px;
  }
}
.twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
  svg {
    width: 32px;
    height: 32px;
    fill: #1da1f2;
  }
}
<label>
  <input type="checkbox" />
  <div class="circle">
    <div class="circle--inner circle--inner__1" ></div>
    <div class="circle--inner circle--inner__2" ></div>
    <div class="circle--inner circle--inner__3" ></div>
    <div class="circle--inner circle--inner__4" ></div>
    <div class="circle--inner circle--inner__5" ></div>
    <div class="circle--outer" ></div>
  </div>
  <svg>
    <defs>
      <filter id="gooey">
        <feGaussianBlur
          in="SourceGraphic"
          result="blur"
          stdDeviation="3"
        />
        <feColorMatrix
          in="blur"
          mode="matrix"
          values="
            1 0 0 0 0
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 18 -7
          "
          result="gooey"
        />
        <feBlend
          in2="gooey"
          in="SourceGraphic"
          result="mix"
        />
      </filter>
    </defs>
  </svg>
</label>


<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/TaminoMartinius" target="_blank">
  <img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""/>
</a>
<a class="twitter" target="_top" href="https://twitter.com/TaminoMartinius">
  <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
    <path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"/>
  </svg>    
</a>


Get this bounty!!!

#StackBounty: #css #svg #safari #svg-animate #svg-filters Why is this SVG Filter Blurred in Safari?

Bounty: 50

Regarding this custom CSS radio button (snippet below or @ https://codepen.io/Zaku/pen/xrKMgb)…

Why does Safari show blurred CSS element?

This works perfectly in Chrome but not Safari… demonstration below:

enter image description here

This is a big deal because most iPhone & Mac users default the Safari browser…

Any idea why this is happening and how it can be fixed?

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #af4671 0%, #a45cd1 100%);
}

* {
  box-sizing: border-box;
}

input[type=checkbox] {
  display: none;
}

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: url('#gooey');
}

@keyframes circle__in {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  16% {
    transform: translate(-50%, -50%) scale(0.95, 1.05);
  }

  33% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.05, 0.95);
  }

  66% {
    transform: translate(-50%, -50%) scale(1);
  }

  83% {
    transform: translate(-50%, -50%) scale(0.98, 1.02);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}


input:checked + .circle {
  transform-origin: 50% 50%;
  animation-name: circle__in;
  animation-duration: 750ms;
  animation-timing-function: linear;
}

.circle {
  transform-origin: 50% 50%;
  animation-name: circle__out;
  animation-duration: 1000ms;
  animation-timing-function: ease;
}

.circle--outer {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 6px solid white;
}

.circle--inner {
  top: 15px;
  left: 15px;
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  background: white;
}

@keyframes circle--inner__in {
  0% {
    transform: scale(0.0);
  }

  80% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

input:checked + .circle .circle--inner {
  transform-origin: 50% -20%;
  animation-name: circle--inner__in;
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.85, 0, 0.2, 1);
}

@keyframes circle--inner__out {
  0% {
    transform: scale(1);
  }

  80% {
    transform: scale(0.19);
  }

  99% {
    transform: scale(0.21);
  }

  100% {
    transform: scale(0);
  }
}

.circle--inner {
  animation-name: circle--inner__out;
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.85, 0, 0.2, 1);
  animation-fill-mode: forwards;
}

.circle--inner__1 { transform-origin: -12% -8%; }
.circle--inner__2 { transform-origin: -35% 50%; }
.circle--inner__3 { transform-origin: 60% 130%; }
.circle--inner__4 { transform-origin: 112% 90%; }
.circle--inner__5 { transform-origin: 75% -30%; }

// dribbble - twitter
.dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
  img {
    display: block;
    height: 28px;
  }
}
.twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
  svg {
    width: 32px;
    height: 32px;
    fill: #1da1f2;
  }
}
<label>
  <input type="checkbox" />
  <div class="circle">
    <div class="circle--inner circle--inner__1" ></div>
    <div class="circle--inner circle--inner__2" ></div>
    <div class="circle--inner circle--inner__3" ></div>
    <div class="circle--inner circle--inner__4" ></div>
    <div class="circle--inner circle--inner__5" ></div>
    <div class="circle--outer" ></div>
  </div>
  <svg>
    <defs>
      <filter id="gooey">
        <feGaussianBlur
          in="SourceGraphic"
          result="blur"
          stdDeviation="3"
        />
        <feColorMatrix
          in="blur"
          mode="matrix"
          values="
            1 0 0 0 0
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 18 -7
          "
          result="gooey"
        />
        <feBlend
          in2="gooey"
          in="SourceGraphic"
          result="mix"
        />
      </filter>
    </defs>
  </svg>
</label>


<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/TaminoMartinius" target="_blank">
  <img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""/>
</a>
<a class="twitter" target="_top" href="https://twitter.com/TaminoMartinius">
  <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
    <path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"/>
  </svg>    
</a>


Get this bounty!!!

#StackBounty: #css #svg #flexbox #safari Safari does not display SVG when using flexbox to center it

Bounty: 50

I’ve got an issue with Safari, SVG, and flexbox

The goal is to have a responsive SVG, that keeps the aspect ratio (16:9). Moreover, the SVG should always sit in the vertical and horizontal center of the screen. The following code works well for all browsers except for Safari… I tried different vendor prefixes, but I have no clue why the SVG is not showing up… Any ideas?

You can test the flawed behavior in the code snippet below. Safari will show a blank page. Other browsers will show a 16:9, always centered teal rectangle.

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  background-color: teal;
  max-height: 100vh;
}
<svg viewBox="0 0 1920 1080">
</svg>

Update

Just some clarification. Depending on the aspect ratio of the viewport, the SVG is either in horizontal center or vertical center. Only when the screen aspect ratio is exactly 16:9 it matches the SVS’s viewBox (see viewBox="0 0 1920 1080"), and it would show without any borders (letterboxes). That is my goal, and solution should work in all browsers—no matter how it is done.

enter image description here


Get this bounty!!!

#StackBounty: #javascript #java #html #safari Html report opened in Safari from Java application displays as if Javascript not enabled

Bounty: 200

I have a Java application that as part of it’s output creates an html report ,then opens the html reports in users browser. On Firefox and Google Chrome this works but on Safari it opens the report as if Javascript was not enabled, even though it is. However if you reopen the report by clicking on a link from another webpage (which lists all reports) then it opens fine in Safari.

What do I need to do to trigger Safari to open the report with Javascript enabled.

Console shows some errors, but I dont understand them

enter image description here

This is related issue https://apple.stackexchange.com/questions/361245/safari-kcferrordomaincfnetwork-error-1-on-local-html-files but doesn’t provide a satisafactory answer.

Actually the answer here https://apple.stackexchange.com/questions/366448/safari-giving-kcferrordomaincfnetwork-error-303-when-visiting-a-site about removing my site from Preferecnes:Privacy works but that is no good because the problem occurs on new computer after running the program only a few times so would have to continually do it.


Get this bounty!!!

#StackBounty: #javascript #safari #angular8 #openseadragon 'OpenSeadragon' import call expects exactly one argument issue on Sa…

Bounty: 50

I’m having an issue with my website not loading on Safari and getting an error message

SyntaxError: Unexpected identifier ‘OpenSeadragon’. import call
expects exactly one argument.

This issue only appears to be happening in Safari (seen both on iPhone and iMac) and not an issue on Chrome or Firefox.

When I click on the error message it takes me to a main.min.js file that was downloaded from cdn.jsdelivr.net. I’m not an expert in web development so I’m not sure what’s wrong with the lines that are highlighted, and also don’t know how I’d modify this file anyway, since I don’t deliver the file.

enter image description here

These are the relevant lines for how I’m including OpenSeadragon into my website in my index.html file.

enter image description here

Any help that can be provided would be appreciated.


Get this bounty!!!

#StackBounty: #ios #macos #video #safari #webrtc How to record audio and video in safari browser in iOS devices and Mac OS devices?

Bounty: 200

Stuck with the implementation to Record Audio & Video in safari browsers.

What I have tried:

I tried using WebRTC to get access to the Microphone and Camera, I was able to show the permissions but I’m unable to get access to the devices. Below is my code:

navigator.mediaDevices.getUserMedia = function(constraintObj) {
                                let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;

I keep getting the below error messages:

getUserMedia is not implemented in this browser

Can't find variable: MediaRecorder

I was able to record a video from iPhone using the below code, but the same code doesn’t work for audio.

<input id="recordUploadFile" style="visibility:hidden;" class="recordFile" type="file" accept="video/*" onChange='getFileNameWithExt(event, "record")' capture>

Unable to figure out below 2 cases:

  • iOS devices – Audio Recording
  • MacOS – Video and Audio Recording


Get this bounty!!!

#StackBounty: #http #safari #mobile-safari #http-referer Safari mobile and desktop are hiding full referrer URL: why?

Bounty: 50

I have a website, www.a.com

In that website, I serve a page at https://www.a.com/mypage that contains this:

https://www.b.com/anotherpage

If I visit from every browser, b.com will receive this as http referrer:

https://www.a.com/mypage

However, if I visit from Safari mobile or desktop, the referrer becomes:

https://www.a.com/

Why? How can I force Safari to send the full referrer?

Example:

from Safari, b.com logs:

123.45.678.901 - - [06/Jun/2020:00:32:03 +0200] "GET /anotherpage/ HTTP/1.1" 200 0 "https://www.a.com/" "Mozilla/5.0 (iPhone; CPU iPhone OS 13_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Mobile/15E148 Safari/604.1"

from another browser:

123.45.678.901 - - [06/Jun/2020:00:31:34 +0200] "GET /anotherpage/ HTTP/1.1" 200 0 "https://www.a.com/mypage/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36"

I’ve tried adding this:

<meta name="referrer" content="unsafe-url">

or this

<meta name="referrer" content="always">

to the <head> of https://www.a.com/mypage but to no avail.


Get this bounty!!!

#StackBounty: #ios #safari #zoom #viewport #pinchzoom Disable pinch zoom on IOS 13 safari

Bounty: 50

I know this question has been asked so much. But have there been any updates on being able to disable pinch zoom on the latest version of safari?

I have a map application that implements pinch to zoom on specific elements of the webpage (the map). I want users to be able to zoom in on the map, while the UI around the page stays the same. This has destroyed my users experience on IOS.

Is there a way to at least disable pinch to zoom on specific elements?

Here is my webpage so you can see exactly what I’m talking about. I hope you can see why disabling viewport zoom (at least when the user pinches on the map) would actually be a benefit, for accessibility.

https://www.yapms.com/app/?t=USA_2020_presidential

more info:
I’m using hammerjs to zoom in on specific elements on the webpage already, so I want to disable apples viewport zoom on those elements.


Get this bounty!!!