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;
Related
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.
As you can see
, there is a 1px border around the widget. It only appears on iOS. I can see the CSS that's causing this in the inspector:
.widget {
...
border: 1px solid #e5e5e5;
...
}
This is the iframe:
<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/307068209&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" scrolling="0" frameborder="0"></iframe>
I know CSS can't effect elements coming from a different domain in an iframe, but client says it looks bad. Is there something that I might be doing to cause this to appear? If not, is there a way I can remove this?
You could hide/clip the outermost 1px of the entire iframe, but that may or may not have a desirable effect. http://codepen.io/anon/pen/evKLMr
div {
overflow: hidden;
width:398px;
height:198px;
}
iframe {
position: relative;
top:-1px;
left:-1px;
width: 400px;
height: 200px;
}
I ended up taking advice from this post:
CSS: Inset shadow by parenting div over iframe
And added this bad boy:
.iframe-wrapper:before{
position: absolute;
content: '';
top: 0;
left: 0;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .4) inset;
z-index: 1;
width: 100%;
height: 100%;
}
Which hides the border well enough
It should be
frameborder="no"
rather than
frameborder="0"
My website http://basement-recordings.com/ is built on a free quill theme on wordpress (4.3.2).
I have a problem on all iphones on both chrome and safari: the main menu seems to work fine the first time I click the "hamburger", but the second time I click it everything is completely wrong.
Can anyone please help me figure this out? I have tried everything but it does not seem to work.
You have a floated li tags here
.main-navigation li {
position: relative;
-webkit-transition: all 0.5s;
transition: all 0.5s;
text-align: center;
height: 150px;
width: 150px;
line-height: 150px;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
border-radius: 75px;
margin-left: 1%;
float: left;
}
so in your media queries you have to clear it from here using float:none
#media only screen and (max-device-width: 349px) and (max-width: 349px) and (min-device-width: 100px) and (orientation: portrait)
.main-navigation li {
height: 29vw;
width: 29vw;
line-height: 29vw;
-webkit-border-radius: 14.5vw;
-moz-border-radius: 14.5vw;
border-radius: 14.5vw;
margin-left: 2.2vw;
padding: 0;
margin-bottom: 2.2vw;
display: block;
float: none;
}
and make sure the other media quires have the same fix, now I have this result.
I solved it.
For some reason, the container's width of 100% only worked the first time I clicked on the menu.
Changing 100% to 100vw seems to have solved the problem.
I am trying to draw a half circle and rotate it using CSS. Like so;
To style the div.circle I use border-radius:50%; then I wrap it in an overflow:hidden; div.mask that is half the width of the circle, thus hiding half of the circle. Then I use transform:rotate(45deg) to rotate the div.mask. This works fine in all browsers that I've tested.
<div class="mask">
<div class="circle"></div>
</div>
.mask {
outline: 1em solid red;
overflow: hidden;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.circle {
-webkit-border-radius: 50%;
border-radius: 50%;
background: blue;
width: 200%;
height: 100%;
}
But when I place this element in a block that has overflow-scrolling:touch; and overflow:scroll; and view it on Mobile Safari on iOS7 the half circle becomes a full circle because the overflow:hidden; on the div.mask doesn't seem to have an effect anymore.
.scroller {
border: 1em solid green;
overflow: scroll;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
How do I fix this?
Here's a live example
im new here, I have a page http://www.worldbellydancefestival.com/dance-costumes that the footer can not properly stay on the bottom, i've added clear to the footer block but it is not working. could you please help. many thanks.
the footer css:
#footer{
width: 980px;
margin: 10px auto;
position: relative;
clear: both;
overflow: hidden;
/*border-top:1px solid #ce09d0;*/
/* padding-bottom:20px;*/
background:url(/images/nav-bg-blk0.png) repeat 0 100%;
max-height: none;
}