Safari 15.6.1
Chrome 107.0.5304.87
div {
display: flex;
gap: 1rem;
background-color: teal;
width: 275px;
height: 150px;
overflow: scroll;
padding-bottom: 16px;
}
<div>
<img src="https://i.imgur.com/7Jef2Jm.jpeg">
<img src="https://i.imgur.com/7Jef2Jm.jpeg">
<img src="https://i.imgur.com/7Jef2Jm.jpeg">
</div>
OS: macOS Monterey 12.6
JSFiddle: https://jsfiddle.net/8tebx2pv/
I want to get the Chrome behaviour in Safari. How do I achieve that?
Related
I have this sidescrolling project that i learned from different sources on the net, but there's an issue i just can't figure out. It works fine on Firefox, i can scroll with the mousewheel in the responsive preview and i can scroll with touch on the phone. But the latter does not work on Chrome Android.
I made a simplified code-pen:
https://codepen.io/MarcDwonn/pen/ZEvQVBR
HTML:
<body>
<div class="external">
<div class="horizontal-scroll-wrapper">
<div class="bg"></div>
<div class="text one">One</div>
<div class="text two">Two</div>
<div class="text three">Three</div>
</div>
</div>
</body>
CSS:
html, body {
margin: 0;
}
.external {
overflow: hidden;
height: 100vh;
}
.horizontal-scroll-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100vh;
transform: rotate(-90deg) translateY(-100vh);
transform-origin: right top;
overflow-y: auto;
overflow-x: hidden;
padding: 0;
height: 100vw;
}
.bg {
width: 5000px;
min-height: 100vh;
background-image: url(https://www.rykewaltz.net/test/img/Man-in-Moon-by-NASA.jpg);
transform: rotate(90deg);
}
.text {
min-height: 50px;
font-size: 100px;
color: #ffffff;
z-index: 10;
padding: 50px;
}
Is there a known issue with Chrome mobile? What am i missing here? I understand the CSS techniques, but don't have much experience with browser compatibility. Any ideas or pointers?
Consider this:
<div class="parent">
<div class="child"></div>
</div>
.parent {
display: flex;
flex-direction: column;
background: teal;
width: 100%;
justify-content: center;
}
.child {
display: flex;
background: red;
width: 50%;
height: 20vh;
max-height: 20px;
}
Chrome (57), Firefox (52), IE (Edge) render is like so:
But Safari (Version 9 on a Mac with OS X) renders it like so:
I consider Safari's rendering wrong, tell me if you disagree.
If you remove either justify-content: center or max-height: 20px or change height: 20vh to height: 20px Safari renders like the other browsers (what I would consider correct).
Codepen: https://codepen.io/anon/pen/jmrOjq
Is this a known Safari bug? Am I miss using flex-box here?
The following code works in all modern browsers that I've tested (safari, chrome and firefox) except internet explorer. I'm trying to vertically and horizontally center an image inside logo. The problem is that the img overflows the container which is 50px 50px. If I remove flexbox from the css, the image does not overflow, but then it is no longer centered.
I've had a look at Flexbugs to try and solve the issue. But no luck. Any suggestion is much appreciated.
html
<div class="content">
<ul>
<li>
<section class="post">
<div class="post-header">
<div class="logo">
<img src="#" alt="">
</div>
</div>
</section>
</li>
</ul>
</div>
css
.content {
max-width: 400px;
padding-left: 1em;
padding-right: 1em;
}
.logo {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid #000;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: left;
height: 50px;
width: 50px;
}
img {
max-height: 100%;
max-width: 100%;
}
I have implemented horizontal scrolling in Firefox, but it's not working in Chrome. In Firefox I have this situation (where A, B, C, D are divs):
but when accessing the same page with Chrome, this is what I see:
the divs are structured like this:
<div class="news-list-container">
<div class="news-list-item">A</div>
<div class="news-list-item">B</div>
<div class="news-list-item">C</div>
<div class="news-list-item">D</div>
<div class="news-list-item">E</div>
<div class="news-list-item">F</div>
</div>
and the css:
.news-list-container {
display: inline-block;
display: -moz-inline-box;
height: 187px;
overflow-x: auto;
overflow-y: hidden;
width: 700px;
}
.news-list-item {
border: 1px solid #E5E5E5;
float: left;
height: 175px;
padding: 5px;
width: 184px;
}
Apparently, Chrome is not recognizing the display: inline-block. Is there something similar/equivalent to -moz-inline-block that does the same for Chrome? If not, how can I obtain the same horizontal scrolling on the two browsers?
Thanks in advance.
Solved it after some experimenting. I had to add another div in between and set its width to the total width of the contained elements (considering borders and paddings). This way the display property is no longer needed and everything works in both Firefox and Chrome.
<div class="news-list-container">
<div id=container>
<div class="news-list-item">A</div>
<div class="news-list-item">B</div>
<div class="news-list-item">C</div>
<div class="news-list-item">D</div>
<div class="news-list-item">E</div>
<div class="news-list-item">F</div>
</div>
</div>
.news-list-container {
overflow-x: auto;
overflow-y: hidden;
}
#container {
height: 187px;
width: 1176px;
}
.news-list-item {
border: 1px solid #E5E5E5;
float: left;
height: 175px;
padding: 5px;
width: 184px;
}
USE Below CSS Property .
-webkit-backface-visibility: hidden
I have a div box (black) that will display a few different product images for the user to scroll through. I am using overflow-x: hidden; and overflow-y: visible; CSS elements to hide the extra products in the UI. It is displaying correctly in Chrome, Firefox, and Safari, but IE 7 and 8 are causing problems. IE 7, the product images are displaying outside of the black box with no scrollbars and in IE 8, no scroll bar is being displayed at all. Here is a link to the code: http://jsfiddle.net/ryanabennett/H8fHX/4/
You can see the different results if you try it in the different browsers. Chrome and Firefox is displaying correctly. Again, I need some CSS help with IE. Thanks in advance.
Here is the HTML:
<div class="livitembox">
<div class="productbox">
<div class="livitem">
<div class="Livwidgetexpandimg">
<img src="#" class="popupbox" />
</div>
</div>
</div>
<div class="productbox">
<div class="livitem">
<div class="Livwidgetexpandimg">
<img src="#" class="popupbox" />
</div>
</div>
</div>
Here is the CSS:
.livitembox{
background: none repeat scroll 0 0 #151515;
margin: 20px 5% 0;
height: 120px;
overflow-x: hidden;
overflow-y: visible;
width: 200px;
}
.productbox{
float: left;
height: 150px;
margin-left: 5px;
/*overflow: hidden;*/
position:relative;
}
.livitem{
float: left;
position: relative;
top: 3px;
}
.Livwidgetexpandimg{
background: blue;
height: 75px;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
padding: 5px;
width: 75px;
float: left;
}
.popupbox{
border: medium none;
height: 75px;
width: 75px;
}
.popup{
background: yellow;
display: none;
float: left;
/*height: 122px;*/
/*margin-left: -10px;*/
opacity: 0;
/*width: 175px;*/
z-index: 50;
height: 106px;
width:230px !important;
position:absolute;
top:0;
left:0;
}
You can fix the IE7 issue by positioning the .livitembox relative.
http://www.rowanw.com/bugs/overflow_relative.htm
edit: putting overflow-y: auto will fix the issue in IE8.
Add this to your html in the HEAD section:
<!--[if lte IE 8]>
.livitembox{overflow-y: scroll};
.productbox{position: static};
.livitem{position: static};
<![endif]-->
(Only tested it in IE8).