In the current scenario, focusing on the button in Safari 13.0.5 does not display the outline until a repaint is forced (such as changing screen size).
This issue does not occur in other browsers.
Are there any workarounds or hacks to ensure the outline shows up in Safari for this particular case?
button {
width: 10em;
height: 3em;
transition: all .25s ease-in-out;
}
button:focus {
outline : 2px blue dashed;
}<button type="button">Button</button>Interestingly, setting a sufficiently negative offset for the outline can overcome this bug.
However, this approach may not be feasible in all situations, so I am looking for a more effective solution.
button {
width: 10em;
height: 3em;
transition: all .25s ease-in-out;
}
button:focus {
outline : 2px blue dashed;
outline-offset: -2px;
}<button type="button">Button</button>