Need to check which browser my app is running in. Specifically, it has to do with applying some special styles on Safari only.
The usual way of doing this I'd thought would be the following:
const isSafari = navigator.userAgent.includes('Safari')
The issue is, it would seem that Chrome also has Safari in it's userAgent.
What would be a more reliable way of detecting when Safari is being used?
Thanks!
Edit: I am also opened to solutions that could just be done through pure CSS.
What I am trying to do is add a scrollbar-gutter in a div. For Safari however, this isn't going to do any good, so I'd like for that case to instead just set overflow-y to scroll.
This is what my code currently looks like:
const App = () => {
const isSafari = navigator.userAgent.includes('Safari') // is true for chrome as well! Need something more reliable!
return (
<div
style={{
border: '1px solid black',
...(isSafari ? { overflowY: 'scroll' } : { scrollbarGutter: 'stable' })
}}
>
A bunch of content which may or maynot have a scrollbar present.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('app')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>