We have a sticky cookie notification at the bottom of a site. It looks fine on all other browsers, but Samsung's default browser called "Internet" displays it wrong, causing the text element to be much narrower than it should be. This results in an ugly line break, mispositioned dismiss button and unnecessary extraneous height for the sticky element.
I don't know any good way to start solving this problem, since it only happens on Samsung's mobile browsers and I haven't found a way to run any CSS/DOM inspector on it. Any ideas?
Fiddle: https://jsfiddle.net/1m94d99o/4/
body, html {
width: 100%;
height: 100%;
font-family: sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: auto;
box-sizing: border-box;
}
*, *::after, *::before {
box-sizing: inherit;
}
.bottom-notifications {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
}
.bottom-notification {
width: 100%;
background-color: darkblue;
color: #fff;
position: relative;
max-height: 200px;
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
-webkit-transition: -webkit-transform 0.3s ease-in, max-height 0.5s linear 0.3s;
transition: transform 0.3s ease-in, max-height 0.5s linear 0.3s;
font-size: 12px;
}
.bottom-notification__content {
max-width: 800px;
width: 100%;
overflow: hidden;
margin: 0 auto;
text-align: left;
height: 100%;
}
.bottom-notification__text {
padding: 15px 77px 15px 15px;
display: block;
width: 100%;
}
.bottom-notification p {
margin: 0;
display: inline;
}
.bottom-notification a {
color: #fff;
font-weight: bold;
text-decoration: underline;
display: inline;
white-space: nowrap;
width: auto;
clear: none;
}
.button, .bottom-notification__dismiss, .search-box-container .search, .wideunit__button a {
border: none;
border-width: 2px 0;
border-style: solid;
border-radius: 3px;
font-size: 14px;
font-weight: 700;
padding: 16px;
-webkit-transition: background-color 0.1s ease-in, border-color 0.1s ease-in;
transition: background-color 0.1s ease-in, border-color 0.1s ease-in;
box-sizing: border-box;
display: inline-block;
margin-top: 1em;
width: 100%;
}
.bottom-notification__dismiss {
display: block;
background-color: blue;
border-radius: 0px;
height: 100%;
border: 0;
position: absolute;
margin-top: 0;
width: 77px;
right: 0;
top: 0;
z-index: 101;
outline: 0;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.bottom-notification__content {
text-align: center;
display: block;
}
.bottom-notification__text {
display: inline-block;
width: auto;
margin-right: 0px;
}
.bottom-notification a {
padding-left: 15px;
}
.bottom-notification__dismiss {
position: relative;
width: 45px;
height: auto;
padding: 0.5em;
top: auto;
right: auto;
display: inline-block;
}
}<div class="bottom-notifications">
<div class="bottom-notification bottom-notification--any" id="notification-5d93762f1abe41aaa78ab86cb59cba7c">
<div class="bottom-notification__content">
<span class="bottom-notification__text"><p>By using this site you accept the use of cookies. <a href="http://www.cookielaw.org/the-cookie-law/" target="_blank">Read more</a></p>
</span>
<button class="bottom-notification__dismiss" data-notificationid="5d93762f1abe41aaa78ab86cb59cba7c" data-cookiename="bulletinalert-14cd5c89c251a9cd882313850af757a10100d620">OK</button>
</div>
</div>
</div>
