This is live on dev.to right now and I haven't been able to find the answer.
Here is a normal code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Authentication with firebase</title>
<script src="https://www.gstatic.com/firebasejs/4.8.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-auth.js"></script>
<style>
#app{
width:50%;
margin: 100px auto;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id="app">
<input type="email" id="txtEmail" placeholder="Enter email" /> <br/>
<input type="password" id="txtPassword" placeholder="Enter password" /><br/>
<button id="btnLogin" >Log in</button>
<button id="btnSignUp" >Sign Up</button>
<button id="btnLogOut" class="hide" >Log Out</button>
<button id="withFB">Log In with FaceBook</button>
<button id="withGithub">Log In with GitHub</button>
</div>
<div id="results"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
On Chrome it wraps as expected on narrow screens and scrolling sideways reveals the code. On safari, the pre is not acting like pre and it is creating wrapping. This makes the code less readable and is a bug.
(Code snippet copied from this post for no particular reason)
Can anyone play with this and help out? Thanks a lot. ❤️
Top comments (4)
Hi
It seems that the issue can be fixed by adding the following to the
pretagMy Safari version is Version 11.0.2 (11604.4.7.1.4) on a mac
Hello Ben!
I've come across your problem recently and these lines of css helped me out:
Let me know if it helped you!
Kristof
You reported, I listened. Fix is coming.
IMO, people should just move on to real browsers ( ahem Chrome, Firefox ) that support features like Service Workers and proper pre tagging. 👶😶