Safari anchor tags with href attribute not getting focus?

I came across this issue and I thought my code was just wrong, but after searching around and looking at related examples, I wonder if Safari really doesn’t focus <a> tags with href attribute?

In my use case, I wanted to use <a href="#top">jump</a> to skip to a page section. To make the anchor tag focusable, we need to add tabindex="0" like so -> <a href="#top" tabindex="0">jump</a>. However, it seems the presence of href attribute is not OK with Safari. See this fiddle and try to Tab through the page (modified from other SO example).


<a tabindex="0">Test 1</a>
<a href="#" tabindex="0">Test 2</a>


a:focus { color: orange; }

Is there any way to fix this? Same code works fine in Chrome.

To achieve local media tracks when deploying ionic application in IOS using twilio

I am building an ionic application. I am using twilio-video sdk to implement video call. I am able to work it in android devices and browser. When i try to deploy it on IOS, the mobile UI Webview browser does not let me use the getUserMedia() function.

Error: getUserMedia() is not supported

Apple developer forums states that it supports only safari 11 and not any other Webkit Views. Has anyone came to a solution?

Also is there a way to get local media tracks when building an ionic application in ios?

How to properly align columns with Flexbox on Safari?

We have a set of columns defined by using widths and Flexbox. The reason behind using fixed widths is to get around the IE Bug regarding the flex-basis and how IE 10-11 ignore calc(). Since we are using Flexbox, we do not want to use the float: left property that other frameworks like Bootstrap may use.

All works well on all browsers except Safari 9, 10.1, and 11.

How can we fix the alignment so that we get everything lines up in two rows of four columns for Safari?

.container {
  max-width: 1440px;
  padding: 0 16px;
  margin: 0 auto;

.container:before, .container:after {
  content: '';
  display: table;

.container:after {
  clear: both;

.flex__row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: row;
  flex: 0 1 auto;

  flex-wrap: wrap;

.flex__col {
  display: flex;
  justify-content: center;
  align-items: stretch;

@media screen and (min-width: 320px) {
  .col--m-s-12 {
    width: 100%;

@media screen and (min-width: 768px) {
  .col--t-s-6 {
    width: 50%;

@media screen and (min-width: 1024px) {
  .col--t-3 {
    width: 25%;

[class*=col--] {
  box-sizing: border-box;
  padding: 2rem;
<link rel="stylesheet" href="">
<div class="container">
  <div class="flex__row flex__row--wrap">
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-cube fa-4x" aria-hidden="true"></i>
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-lock fa-4x" aria-hidden="true"></i>
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-bath fa-4x" aria-hidden="true"></i>
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-adjust fa-4x" aria-hidden="true"></i>
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-bars fa-4x" aria-hidden="true"></i>
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-arrows fa-4x" aria-hidden="true"></i>
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-bus fa-4x" aria-hidden="true"></i>
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-archive fa-4x" aria-hidden="true"></i>

Current Result on breakpoint > 1024px
current safari issue

Desired Result on breakpoint > 1024px:

Attributes vs. style properties of SVG

I have an issue trying to make an animation represented on the pic. VGwDC.png

The checkbox is made of SVG paths and rect using styled components. Here’s the code of the blue fill of it:

import styled from "styled-components";

export const BoxFill = styled.rect.attrs({
  x: 0,
  y: 0,
  rx: 0,
  ry: 0,
  width: "100%",
  height: "100%",
  fill: transparent;
  rx: 80%;
  ry: 80%;
  x: 50%;
  y: 50%;

  width: 0;
  height: 0;
  transition: all ${transition.release}; // disappear

  ${Label}:hover > ${Input}:checked + ${Box} & {
    fill: ${({ theme: { checkbox } }) => checkbox.selectedHoverBoxBackground};

  ${Input}:checked + ${Box} & {
    fill: ${({ theme: { checkbox } }) => checkbox.selectedBoxBackground};
    width: 100%;
    height: 100%;
    rx: 0;
    ry: 0;
    x: 0;
    y: 0;
    transition: all ${}; // appear

  ${Input}:checked[disabled] + ${Box} & {
    fill: ${({ theme: { checkbox } }) => checkbox.selectedDisabledBoxBackground};

So right now it works fine for Chrome, Firefox, etc. But Safari seems to take attributes first (rx, ry) and ignore them in styles, even though they are declared. As the result I get a sharp-bordered fill all the time. This stays as is in IE 11 (though animations doesn’t work here, but for now I don’t mind). This case is not appropriate.
If I set attributes (rx, ry) to 80% at the first place, then animation in Safari is what I expect, but in EI I get this picture. These white holes in a box.

I expect it to work like in the second Safari’s case, but have trouble researching the reason of this behaviour.

laggy css transition in safari depending on items count

I’m facing laggy width css transition (1200px to 100%) on a position:sticky div living beside a list of div items.

Chrome and Firefox runs smoothly.

The more items div on the page, the more the transition is laggy on Safari.

I’ve tried

transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;

with no success.

Any suggestion?

Safari Ignores Video in Header Background

I tried to place a .mp4 in the Background of my WordPress-Page.
Chrome and Firefox display it correctly, but Safari even show it.

After few tries of CSS, JS-Fixes and short peek in the Safari-Source Code I’ve noticed that Safari not even creates the Video-Element.

Chrome Source Code
Safari Source Code

I hope you can help me! 🙂

Working with pop-up window (Appium, Safary, iOS)

I’m doing some automation testing for Safari. Using Nppium, Nighwatch.JS (Node.JS).
Currently, I have a trouble with pop-up window.

Maybe someone have met it before and know how to deal with it.
According to this doc, the capabilities autoAcceptAlerts and autoDismissAlerts do not currently work.

Open a pop-up

On my previous project I had similar issue and resolved it with


Advantages and disadvantages of PWA only greenfield project?

Our team is starting new project with initial consideration of react-native as a framework to build on top of (Majority of us have been within React ecosystem for a while now).

We are also discussing PWA only based approach since support is coming to Safari soon and Chrome already has good one with a lot of apis available and Desktop PWA’s coming soon.

I wanted to ask community about possible complications related to PWA only approach, here are drawbacks we thought of:

1) No presence / discoverability in App / Play stores

2) No access to certain api’s like NFC… (but by the looks of in chrome, we will have access to all we need)

3) Smooth UX will be hard to achieve (although very possible to do 60fps)

4) Users are not too familiar with PWA installation / usage process, might find it alienating

5) A lot of knowledge required to get good caching / networking and performance experience (Most of this we do know from web app development already however)

Some advantages

1) No cuts taken by app stores for in app digital content purchases

2) Truly one codebase for all platforms Mobile and Desktop

3) Lighter in terms of weight on user’s device

4) Full control of release process

5) Easy and fast updates

6) Our team will develop higher quality code with tooling they are already familiar with as opposed to learning native bits of react native.

Assuming go live for the project after 7 – 9 months, is PWA a viable way to go forward with?

javascript submit function freezes the custom css loader in safari

In safari, when I am submitting a form on click of button and calling a function which should show a custom css loader and then a javascript submit method gets executed and I get the data.
But when I click on the button, the loader appears but it does not spin (the entire page get freeze) and after some time, the loader disappears and the data gets populated.
In Chrome it is working fine.

I am not sure wether the issue is with css or the call which I am making because if I only call the showLoader() and commenting the submit method, the loader works fine and the same loader works fine in other calls.

function showLoader(){
function submit(){

Safari single side border radius not rendered correctly

I’m trying to create a half circle border around a div using border-bottom to create this effect:
enter image description here

It renders correctly on chrome and firefox (can’t test android although it appears correct in chrome dev tools) but on safari 11.0.3 and ios 11.2.6 you can see a top border appearing.


<div class="circle-border-wrapper">
    <div class="circle-border">
        <h3>{{ .heading }}</h3>
        <p>{{ .text }}</p>


.circle-border-wrapper .circle-border:before {
  content: " ";
  position: absolute;
  left: 0;
  top: -66px;
  border-bottom: 8px solid #ea3dd3;
  border-radius: 50%;
  height: 187%;
  width: 100%;

Any ideas?