I have a div which I would like to be scrollable, I have added the following code but it doesn't seem to work on iOS devices, works perfectly for Andriod.
I searched and found that adding -webkit-overflow-scrolling: touch; should resolve the problem, however it still isn't allowing me to scroll :/
#media (max-width: 991px) {
.fotorama__nav--thumbs {
height: 180px !important;
}
.fotorama__nav--thumbs .fotorama__nav__shaft {
z-index: 99999;
overflow-x: scroll;
-webkit-overflow-scrolling: touch !important;
}
.fotorama__nav__shaft .fotorama__thumb {
height: 65px !important;
}
}
Any ideas why the above isn't working?
Related
On all devices scroll works but not working on iPhone
#media only screen and (-webkit-min-device-pixel-ratio: 0) {
#supports (-webkit-overflow-scrolling: touch) {
body {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust:none;
height: 1300px!important;
position: relative!important;
background-image: radial-gradient(circle at center , #0c505f, #053540 );
color: #0c505f;
width: 95%!important;
}
When you dynamically add content to a div with
-webkit-overflow-scrolling: touch; that exceeds the div in height, it becomes broken and unscrollable. You can fix this by constantly having
an inner div, that triggers the scrollbar because its 1px higher than
the outer div:
- (Patrick Muff)
.outer {
overflow: scroll;
-webkit-overflow-scrolling: touch;
/* More properties for a fixed height ... */
}
.inner {
height: calc(100% + 1px);
}
There is a strange phenomenon on safari: border-radius of parent element doesn't work when child element has a background.
Everything is OK when remove -webkit-overflow-scrolling: touch;.
What happen when set -webkit-overflow-scrolling: touch; in safari ?
How can I keep -webkit-overflow-scrolling: touch; and prevent the strange phenomenon at the same time?
html,
body {
background: red;
}
* {
padding: 0;
margin: 0;
}
.main {
height: 250px;
width: 250px;
margin: 10px;
overflow: scroll;
border-radius: 20px;
background: green;
-webkit-overflow-scrolling: touch; //ios平滑滚动
}
ul li {
list-style-type: none;
}
li:nth-child(even) {
background: gray;
}
<div class="main">
<ul>
<li>This covers miscellaneous DOM extensions used by Safari in macOS and iOS. These extensions include DOM touch events for processing gestures for devices that have a touch screen and visual effects that support 2D and 3D transforms, animation, and transitions.
Most of the classes described in this reference are Apple extensions that may also be proposed W3C standards.</li>
<li>This covers miscellaneous DOM extensions used by Safari in macOS and iOS. These extensions include DOM touch events for processing gestures for devices that have a touch screen and visual effects that support 2D and 3D transforms, animation, and transitions.
Most of the classes described in this reference are Apple extensions that may also be proposed W3C standards.</li>
...
</ul>
</div>
I have solved this issue in the help of my colleague, as follows:
.main {
margin: 10px;
background: green;
overflow: scroll;
border-radius: 20px;
}
.main .wrapper {
height: 250px;
overflow: scroll;
border-radius: 20px;
}
I add a wrapper element between scroll area(.main) and scroll content(ul), and then set wrapper height, overflow and border-radius the same as scroll area(.main).
But what happen when set -webkit-overflow-scrolling as touch ?
Looking forward to your answer.
I have a web-view with blurry text in iOS 7. There are many posts with solutions, however none of them seem to work in my case. The best solution that I've found thus far is to apply -webkit-transform: translateZ(0); to the blurry elements, as seen here. But doing this causes -webkit-overflow-scrolling: touch; to become inoperable. Any advice would be much appreciated.
UPDATE: Here is the CSS associated with the scrolling wrapper and elements containing blurry text
#scrolling_element {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
overflow: auto !important;
}
.elements_w_blurry_text {
position: relative;
border: 1px solid #000;
background-image: url("../path/to/img.png");
background-repeat: repeat;
-webkit-transform: translateZ(0);/* or any other suggested code*/
}
Try adding this into your css:
-webkit-text-size-adjust:none;
I'm using CSS sprite sheets for a page I'm creating for mobile devices. I've got the layout how I want it, and here's the CSS I'm using for that (this looks fine on Chrome Canary's iPhone 3GS emulator):
div#logo {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px 0px no-repeat;
display: inline-block;
width: 90px;
height: 44px;
display:block;
float:right;
margin:10px;
}
div#stars {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px -46px no-repeat;
display: inline-block;
width: 71px;
height: 12px;
}
div#iPhone {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') 0px 0px no-repeat;
display: inline-block;
float:left;
width: 112px;
height: 238px;
margin-top: 54px;
}
div#separator {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px -60px no-repeat;
display: inline-block;
width: 1px;
height: 53px;
}
Of course, when viewing this on a Retina display the images come out slightly pixellated. I followed the advice in this tutorial for switching sprite sheets for different display densities, and added this:
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dppx) {
div#logo {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: -226px 0px;
}
div#stars {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: -226px -91px;
}
div#iPhone {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: 0px 0px;
}
div#separator {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: -226px -117px;
}
}
So now my page still displays fine on the iPhone 3GS simulator (since the #media switch does nothing to it) but when looking at it from an iPhone 4 simulator the images come through as double the size. The layout stays the same (the frames displaying the images are the same size) but the images are cropped so you can only see the top-left quarter of each image.
Is there some other attribute I need to specify to make the images squeeze into the double-density pixels while maintaining the same size on the screen?
I found a solution: instead of defining the new offsets for each element like so:
background-position: -226px 0px;
We just need to 'pretend' that the image is the same size it used to be. So we set the background-size attribute to the size of the smaller sprite sheet:
background-size: 204px 238px;
...and that seems to work!
I've seen a few posts about this but it does not seem to help with the issue I have used <meta name="viewport" content="width=device-width,initial-scale=1" /> in the head but it does not solve the problem of the header and footer not spanning the width of the viewport. The main content area seems work though.
the site to reference is brendanfenn.com
The css is as follows. Any insight is greatly appreciated.
#wrapper {
margin: 0 auto;
position: relative;
}
#header_container{
background-image: url(http://www.brendanfenn.com/wp-content/uploads/2013/02/headerBG1.jpg);
width: 100%;
}
#header {
width:964px;
height:150px;
margin: 0 auto;
}
#content {
width:964px;
background: url(images/border-bg.gif) repeat-y top left;
z-index: 1;
margin: 0 auto;
}
#content #left-col {
width:615px;
float:left;
padding: 20px 11px 20px 10px;
z-index: 1;
}
#content #right-col {
width:307px;
padding:3px;
float:left;
z-index: 1;
}
#footer {
width:100%;
background: #2a2006;
margin: 30px 0 auto;
}
Try setting the width and height values for your body element
body { width: 100%; min-height: 100% }
Another option that may help address the issue is using the #media type, which you can use to specify css values for when a device is in landscape mode.
#media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
body { //values here }
}
<meta name="viewport" content="width=device-width,initial-scale=0.4">
(From the linked file)
is your problem. This is setting your viewport to 800px wide (device-width * 1/0.4).
'width:100%' refers to 100% width of the viewport, i.e. 800px, so everything is working as it should.