When I scale an element on Safari Mobile / iOS, the text seems blurry.
I tested it on iOS7, iOS8, iOS9 even iOS10.
.sticky-note {
position: fixed;
bottom: 1em;
right: 1em;
padding: 0.5em 1em;
background: tomato;
color: white;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div class="sticky-note">
This text is blurry on iOS
</div>
The blurry effect came from the combination of position: fixed and transform: scale().
The position: fixed seems to enable the GPU acceleration, which is faster, but could reduce rendering quality of fonts.
.sticky-container {
position: fixed;
bottom: 1em;
right: 1em;
}
.note {
padding: 0.5em 1em;
background: tomato;
color: white;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div class="sticky-container">
<div class="note">
This text is not blurry \o/
</div>
</div>
Related
I have an issue here with 0clue what is going on. I am currently developing an application using ionic angular. The preview on the web version is totally fine and looks good reference image.
But when I deploy it into iOS the button shape is off and there is a white structure blocking part of the header reference image.
I am new to the app developing world, please bear with my stupidity on this.
Can someone guide me in the right direction, please?
ion-toolbar {
--background: #383E56;
height: 102px;
}
ion-header ion-toolbar:last-of-type {
display: flex;
align-items: center;
justify-content: center;
}
.searchbar {
width: 352px;
height: 42px;
background: #C2C3C8;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.6);
border-radius: 90px;
-webkit-position: sticky;
position: sticky;
display: flex;
justify-content: flex-end;
padding: 3px 3px;
margin: auto;
margin-top: 35px;
}
.btn2{
width: 36px;
height: 36px;
border-radius: 50%;
box-sizing: border-box;
background: #F69E7B;
box-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 25%);
//position
position: absolute;
top: 3px;
left: 313px;
//vector size & position
font-size: 27px;
display: flex;
justify-content: flex-end;
align-items: center;
justify-content: center;
}
<ion-header>
<ion-toolbar>
<div class="searchbar">
<button class="btn2" (click)="toMorePage()">
<ion-icon name="arrow-back-outline"></ion-icon>
</button>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
tried with this code, still not working. It's fine on every other devices, it's fine in MAC as well, only the problem is on ios responsive devices.
You need to add overflow-scrolling to parent div. Check the below demo
.wrap {
width: 320px;
height: 500px;
position: relative;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch !important;
overflow-y: auto !important;
border: 2px solid #ddd;
margin-bottom: 20px;
}
iframe {
width: 100%;
height: 100%;
border: none;
display: block;
position: absolute;
}
<div class="wrap">
<iframe class="iframe" src="https://theimpossiblecool.tumblr.com/"></iframe>
</div>
In my site there are a few thumbnail when u hover, there will be text coming out.
In android it is perfect, when u touch the thumbnail, the text will appear before the thumbnail go into the slideshow.
But in IOS, the text will not appear and straight away go to the slideshow.
The thumbnails
This is my css
.text {
background-color: rgba(183, 191, 183, 0.65);
color: white;
font-size: 16px;
width:100%;
height:100%;
padding-top:40%;
padding-left:2%;
cursor: pointer;
.middle {
transition: .5s ease;
-webkit-transition: .5s ease ;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
-webkit-transform: translate(-50%,-50%);
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
i'm creating my first web site and it's going great, looks good, and works properly. The problem i have is that i just uploaded the files to the web hosting to see how is it looking across different devices, looks great on my Smart TV, on my Android phone, on the MacBook, BUT on the iPhone and the iPad everything looks bad.
The slider is no longer overflowing, the widht is not working, even the menu buton is gone and the nav is always showing, please i need some help with this, is there some code to add so this can work on IOs movile devices?
I been looking the internet for hours trying to find the solution, i found something that includes this code:
-webkit-appearance: none;
But nothing happens everything looks bad.Thanks in advance.
You are using CSS properties that need to be prefixed in order to work in -webkit browsers, even in newer versions, such as display:flex, justify-content, transition, flex-direction,...
The practical solution is to write normal (up to date) CSS and than run it through a tool that will add the necessary prefixes for making it compatible with most browsers. It's called auto-prefixing and you can read more about it here. Good auto-prefixing tools are connected to caniuse and can be configured for various specific needs (prefix for last three versions from each browser, or prefix for all browsers with an above X usage percentage, or combinations between the two).
Here are the auto-prefixed versions of your project's CSS files. Replace assets/css/header.css with:
*{
margin: 0;
padding: 0;
-webkit-appearance: none;
}
header{
z-index: 1000;
position: fixed;
width: 100%;
font-family: "roboto";
background-color: rgba(0, 0, 0, 0.7);
}
#btn-menu{
display: none;
}
header label{
display: none;
height: 30px;
width: 30px;
padding: 10px;
}
header label:hover{
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
}
.menu ul{
margin: 0;
list-style: none;
padding: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.menu li:hover{
background-color: rgba(0, 0, 0, 0.8);
}
.menu li a{
display: block;
padding: 20px 20px 10px 20px;
color: #fff;
text-decoration: none;
}
#media (max-width: 768px) {
header label {
height: 60px;
width: 60px;
padding: 10px;
display: block;
}
.menu{
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
width: 30%;
margin-left: -30%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.menu ul{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
#btn-menu:checked ~ .menu{
margin: 0;
}
}
And assets/css/body.css with:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-appearance: none;
}
body{
z-index: 500;
position: relative;
}
#logo{
padding-top: 50px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#logo-image{
width: 100%;
max-width: 650px;
}
#containerslider{
padding-top: 59px;
position: relative;
margin: auto;
width: 100%;
max-width: 1920px;
overflow: hidden;
}
.slider{
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 400%;
}
.slider .section{
display: block;
height:100%;
width: 100%;
}
.slider img{
display: block;
height: 100%;
width: 100%;
}
.btn-prev, .btn-next{
width: 50px;
height: 50px;
color: white;
font-family: sans-serif; "roboto";
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 50px;
font-size: 22px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
.btn-prev{
left: 10px;
}
.btn-next{
right: 10px;
}
.btn-prev:hover, .btn-next:hover{
background: rgba(0, 0, 0, 0.9);
}
.space{
height: 2000px;
}
I'm working on a site where you have some boxes with background-images as thumbnails. I have to use background-image because the CMS we are working on is pretty old-dated and the client won't change (mon€y is the main-problem).
i figured out a strange behavior in the iOs Safari on the iPad2 & iPhone5 (latest iOS) and don't know why.
Here's my code:
a img,
.thumb,
figcaption,
a:hover .thumb {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.thumb {
height: 250px;
margin-bottom: 28px;
overflow: hidden;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
figcaption {
background-color: #b61910;
background-color: rgba(182, 25, 16, .85);
position: absolute;
height: 39px;
bottom: 35px;
color: white;
width: calc(100% - 30px);
}
figcaption h3 {
font-style: normal;
position: absolute;
bottom: 5px;
margin-top: 0;
margin-bottom: 0;
padding: 10px 0 0 5px;
transition: transform 0.3s;
transform: translate3d(0, 0%, 0);
}
a:hover h3 {
transform: translate3d(0, -20%, 0);
text-shadow: 1px 1px 1px #000;
}
a:hover figcaption {
height: 5px;
}
a:hover .thumb {
background-size: 120% 120%;
opacity: .8
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<a href="">
<div class="col-sm-12">
<figure class="thumb" style="background-image:url(http://lorempixel.com/output/food-h-c-850-890-7.jpg)">
<figcaption>
<h3>Product-Title</h3>
</figcaption>
</figure>
</div>
</a>
</div>
</div>
On my Desktop it shows the whole image but on iOS it looks like it shows the original size inside the thumbnail-box.
How can i solve this problem?
Any help would be great :)
Thanks
moesphemie
Maybe? https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/
Code:
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;